当值为 0 时，如何停止胜利轴的行为不同？答案

【问题标题】：How to stop victory axis behave differently when there are 0 values?当值为 0 时，如何停止胜利轴的行为不同？
【发布时间】：2022-08-20 22:00:34
【问题描述】：

如果你去第一个示例演示here，代码：

<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，并尝试了不同的domainPaddings，使用singleQuadrantDomainPadding，但没有任何效果。

标签： javascript reactjs react-native victory-charts

【解决方案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>

以及效果：

【讨论】：