javascript - 在 d3 图表中保持轴刻度之间的距离

Question

我正在尝试使用 d3-js 绘制图表。我希望 X 轴值为[0.25yrs; 0.50yrs; 1yr; 2yrs; 5 yrs; 10yrs; 15yrs; 20yrs; 30 yrs; 50 yrs]. 这可以使用 d3 的tickValues()&tickFormat()函数来完成。但我需要在 0.25、0.50 和 1 年的刻度之间保持一定的距离，因为大多数值都属于这些年份，它们之间的距离越大，绘制的圆圈的重叠就越少。

我需要的刻度位置是这样的：

您可以在上图中看到 0.01 和 .02 之间的距离。我们怎么能做到这一点？

Answer 1

您将需要实现一个自定义比例，将您的输入范围映射到这个非均匀的输出范围。然后你可以给你的轴这个比例，它会相应地绘制刻度。

如果有任何东西与您想要的足够接近（可能是对数刻度？），您可以查看 D3 提供的刻度，但如果找不到任何东西，您别无选择，只能实现自己的。