javascript - VISX 避免在 Y 轴上浮动

Question

如何避免在 Y 轴上浮动？

注意：我不想使用Math.round，因为它会破坏轴。VISX 中有什么类似于 CHART.js 的precision吗？

标签： javascriptreactjsvisx

Answer 1

您可以使用tickFormat格式化轴刻度，而无需修改基础数据和破坏轴。tickFormat 可以使用任何控制如何标记刻度的函数。

VisX 建立在 d3.js 之上，您可以在此处阅读其 tickFormat 函数：https ://github.com/d3/d3-scale/blob/main/README.md#continuous_tickFormat

这是一个示例轴：

// function, that controls tick format

const formatValue = (value) => Math.round(value)

// Axis code in you component <SVG /> container

<AxisLeft
    tickTextFill={'#EDF2F7'}
    stroke={'#EDF2F7'}
    tickStroke={'#EDF2F7'}
    scale={yourScale}
    tickFormat={formatValue}
/>