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

Question

我只有5个值[1,2,3,4,5]作为y-d3.js线图中的坐标。 但是，我最终得到了更多的值[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()方法，因此请查看每种秤类型的文档。 （对于没有scales ticks()方法的顺序刻度，参数将被忽略。）

  对于线性比例尺， scale.ticks()方法接受数字作为参数； 然后，刻度会生成大约几个滴答声，在区域内用整数值均匀间隔。 如果您未指定刻度数，则默认值为创建大约10个刻度，这就是为什么您的域从0到5时以0.5间隔获取刻度的原因。

那么，如何获得所需的行为（无十进制刻度值）？

• 使用.tickValues() ，您将创建一个唯一的Y值数组作为刻度线：

   var yValues = data.map(function(d){return dy;}); //array of all y-values yValues = d3.set(yValues).values(); //use a d3.set to eliminate duplicate values yAxis.tickValues( yValues ); 

  请注意，这种方法将使用指定的y值，即使它们之间的间距不均匀。 这可能是有用的（一些数据可视化书籍建议使用此方法作为对图形进行注释的简便方法），但有些人可能认为您的图形看起来混乱或损坏。

• 使用.ticks() ，您.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"));

它具有消除小数的技巧，不会影响刻度数

对于使用D3的数字格式， 这是一个很好的资源。