当有 0 值时如何阻止胜利轴表现不同？

Question

如果您转到第一个示例演示这里，代码为：

<VictoryChart
  theme={VictoryTheme.material}
  domainPadding={10}
>
  <VictoryBar
    style={{ data: { fill: "#c43a31" } }}
    data={sampleData}
  />
</VictoryChart>

您会看到条形看起来不错，对齐得很好：

但是一旦你像这样更改代码（添加具有 0 x 值的数据点）：

<VictoryChart
  theme={VictoryTheme.material}
  domainPadding={10}
>
  <VictoryBar
    style={{ data: { fill: "#c43a31" } }}
    data={[{x: 0, y: 2}, ...sampleData]}
  />
</VictoryChart>

你发现新酒吧变得很奇怪。

我大概明白为什么会这样了。如果存在负值，那么它们将显示在 y 轴左侧。但我发现非常令人沮丧的是，我找不到一种方法来关闭它，并处理 0，甚至负值（如正值），并且始终只显示左侧的轴。

我正在使用自定义

VictoryAxis

，并尝试了不同的

domainPadding

，与

singleQuadrantDomainPadding

一起玩，但没有任何效果。

Answer 1

我使用 set

offsetX

和 set

tickValues

来处理

x=0

问题。

这是代码：

<VictoryChart
  theme={VictoryTheme.material}
  domainPadding={10}
>
  <VictoryBar
    style={{ data: { fill: "#c43a31", padding: 15 } }}
    data={[{x:0, y:2}, ...sampleData]}
  />
  <VictoryAxis tickValues={[-0.25, 0,1,2,3,4,5]} tickFormat={t => t>=0 ? t: ''} />
  <VictoryAxis offsetX={60}  crossAxis dependentAxis/>
</VictoryChart>

效果：