VISX如何避免Y轴出现浮点数 是否有类似CHART.js的precision配置

VISX没有直接名为precision的配置项，但可以通过以下两种方案达到和Chart.js的precision配置完全一致的效果，无需使用Math.round，不会破坏Y轴的正常展示逻辑：

• 方案1：开启scale的nice配置
  线性Y轴默认使用的scaleLinear支持nice参数，开启后会自动将刻度的上下边界调整为规整的整数，同时自动优化刻度间隔，不会修改原数据的映射关系：

  import { scaleLinear } from '@visx/scale';
  
  const yScale = scaleLinear({
    domain: [minData, maxData],
    range: [yAxisHeight, 0],
    // 开启自动规整整数刻度边界
    nice: true,
  });
  

  配合给<AxisLeft>设置合适的tickCount参数，大部分场景下可以直接生成全整数的Y轴刻度。
• 方案2：自定义tickValues指定整数刻度
  如果需要100%保证不会出现浮点数，可以自行生成符合数据范围的整数刻度数组，直接传给轴组件：

  // 基于数据极值生成整数刻度，步长可根据业务需求调整
  const minY = Math.floor(minDataValue);
  const maxY = Math.ceil(maxDataValue);
  const step = 2; // 可自定义步长
  const yTickValues = Array.from(
    { length: Math.floor((maxY - minY) / step) + 1 },
    (_, index) => minY + index * step
  );
  
  // 传入AxisLeft组件
  <AxisLeft
    scale={yScale}
    tickValues={yTickValues}
    tickFormat={(value) => `${value}`}
  />
  

  该方案完全可控，生成的刻度全为整数，也不会影响原数据点的Y轴位置。

浮点数Y轴效果示例：

内容的提问来源于stack exchange，提问作者underfrankenwood