我们如何更改 d3.js 线图中线性刻度生成的刻度值？答案

【问题标题】：How do we change the tick values generated by a linear scale in a d3.js line plot?我们如何更改 d3.js 线图中线性刻度生成的刻度值？
【发布时间】：2014-05-01 20:46:25
【问题描述】：

我只有 5 个值 [1,2,3,4,5] 作为 d3.js 线图中的 y 坐标。但是，我最终得到更多的值 [0.5,1,1.5,2,2.5,3,3.5,4,4.5,5] 有没有办法编辑 d3.js 文件或 html 文件以便将值绘制为根据我的要求？

【问题讨论】：

那是什么要求？ D3 量表并不关心有多少值。
您说的是轴上的刻度数吗？因为这与数据中值的数量无关，并且以不同的方式设置。

标签： javascript d3.js

【解决方案1】：

d3 轴创建的刻度线可以通过两种方式控制：

使用axis.tickValues(arrayOfValues)，您可以明确设置要在轴上显示的值。通过将每个值传递给关联的比例来定位刻度，因此这些值应该在您的比例范围内。这适用于任何类型的尺度，包括序数尺度，只要您给出的值适合该尺度。
或者，您可以使用axis.ticks(parameters) 修改刻度计算刻度线的方式。您可以使用的参数类型取决于您使用的比例尺类型——您指定的值将直接传递给比例尺的.ticks() 方法，因此请查看每种比例尺类型的文档。（对于没有ticks() 方法的序数比例，参数将被忽略。）

对于线性标尺，scale.ticks() method 接受一个数字作为参数；然后，比例尺生成大约那么多刻度，在域内均匀分布，具有整数值。如果您不指定滴答计数，则默认创建大约 10 个滴答，这就是为什么当您的域从 0 到 5 时，您会以 0.5 个间隔获得滴答。

那么你如何获得你想要的行为（没有十进制刻度值）？

使用 .tickValues()，您将创建一个唯一 Y 值数组作为您的刻度：
```
var yValues = data.map(function(d){return d.y;}); 
         //array of all y-values
yValues = d3.set(yValues).values(); 
         //use a d3.set to eliminate duplicate values
yAxis.tickValues( yValues );
```
请注意，这种方法将使用指定的 y 值，即使它们的间距不均匀。这可能很有用（一些数据可视化书籍建议使用这种方法作为注释图表的一种简单方法），但有些人可能认为您的图表看起来凌乱或损坏。
使用.ticks()，您将计算出您的 Y 域的范围，并设置刻度数，这样您就不会有更多的刻度线，然后您的域上有可用的整数：
```
var yDomain = yScale.domain(); 
yAxis.ticks( Math.min(10, (yDomain[1] - yDomain[0]) );
```
这将为宽域创建默认（大约 10 个）滴答，但是当您的域的最大值和最小值之间的差小于 10 时，将为每个整数值创建一个滴答。（虽然滴答计数通常是近似值，如果与指定的滴答计数匹配，刻度将始终首选整数值。）

【讨论】：

我真的希望scale.ticks() 方法可以准确地生成指定的滴答数。
@Felix 如果你真的需要精确分割的刻度，不管它们是否是偶数，你总是可以使用tickValues() 方法自己设置精确值。
当你开始着手时，平衡“精确的刻度数”、“良好的刻度值”、“均匀间隔的刻度”和“包含整个数据域”可能是个难题

【解决方案2】：

是的，你也可以试试

yAxis.ticks(5).tickFormat(D3.numberFormat(",d"));

它可以消除小数，不影响刻度数

Here 是使用 D3 格式化数字格式的好资源。

【讨论】：