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

Question

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

Answer 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时，将为每个整数值创建一个刻度。（尽管刻度计数通常是近似值，如果匹配指定的滴答计数，则比例将始终优先于整数值。）

Answer 2

是的，您也可以尝试

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

它具有消除十进制数字的技巧，不会影响刻度数

Here是使用D3表示数字格式的很好资源。