在dependentAAxis上处于0级别时，胜利图表线被裁剪

Question

我对Victory Charts有一个样式问题，无论是我使用的VictoryLine还是VictoryArea组件，当它到达图表底部时，都会被裁剪，正如您在屏幕截图上看到的那样。线条的笔划宽度设置为2，当它在从属轴上平面为0时，它显示为1像素笔划宽度。

胜利图区域截图

我已经在<VictoryChart>或<VictoryArea>组件上尝试了我能使用的所有填充选项，我想把整个VictoryArea组件提升大约1px来解决这个问题，但似乎我做不到。

我在这里错过了什么？

以下是在VictoryArea组件上进行填充尝试的代码：

<VictoryAxis
dependentAxis
tickCount={2}
tickLabelComponent={<VictoryLabel dx={0} />}
crossAxis={false}
style={{
grid: {
stroke: '#F2F4F7',
},
axis: { stroke: 'none' },
tickLabels: {
fontSize: 11,
fill: '#98A2B3',
},
}}
/>
<VictoryAxis
fixLabelOverlap
style={{
axis: {
stroke: 'none',
padding: 10,
},
tickLabels: {
fontSize: 11,
margin: '20px 0 0 0',
fill: '#98A2B3',
},
}}
/>
<VictoryArea
style={{
data: {
fill: `transparent`,
stroke: color || '#1A1EFF',
strokeWidth: 2,
padding: '0 0 1px 0',
},
labels: {
display: 'none',
},
}}
padding={{ bottom: 1 }}
data={groupedData}
x="date"
y="total"
/>
</VictoryChart>

Answer 1

问题似乎是图表使用的最小y域为0。因此，你在x轴上的线被切断了一半的笔划宽度

你可以用这样的东西接管y域的控制权：

<VictoryChart minDomain={{ y: -1000 }}>
...
</VictoryChart>

您需要使该值对数据做出响应。你可以用这样的东西得到最大y值：

const maxY = Math.max(groupedData.map(d => d.total))

然后你可以用它来确定一个合适的最小域，例如：

<VictoryChart minDomain={{ y: -0.1*maxY }}>
...
</VictoryChart>

希望这能有所帮助。