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

How do we change the tick values generated by a linear scale in a d3.js line plot?

提问by Jitendra

I only had 5 values[1,2,3,4,5] as my y - coordinates in the d3.js line plot. But, I end up getting more values [0.5,1,1.5,2,2.5,3,3.5,4,4.5,5] Is there a way to edit the d3.js file or the html file inorder to plot the values as per my requirement?

我在 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 文件以便将这些值绘制为根据我的要求？

回答by AmeliaBR

The tick marks created by a d3 axis can be controlled in two ways:

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

• Using axis.tickValues(arrayOfValues)you can explicitly set the values that you want to show up on the axis. The ticks are positioned by passing each value to the associated scale, so the values should be within your scale's domain. This works for any type of scale, including ordinal scales, so long as the values you give are appropriate to that scale.

• Alternately, using axis.ticks(parameters)you can modify the way the scale calculates tick marks. The types of parameters you can use depends on the type of scale you're using -- the values you specify will be passed directly to the scale's .ticks()method, so check the documentation for each scale type. (Parameters will be ignored for ordinal scales, which don't have a ticks()method.)

  For linear scales, the scale.ticks()methodaccepts a number as a parameter; the scale then generates approximatelythat many ticks, evenly spaced within the domain with round number values. If you do not specify a tick count, the default is to create approximately 10 ticks, which is why you were getting ticks on 0.5 intervals when your domain was from 0 to 5.

• 使用axis.tickValues(arrayOfValues)您可以明确设置要在轴上显示的值。通过将每个值传递给关联的比例来定位刻度，因此这些值应该在您的比例域内。这适用于任何类型的比例，包括序数比例，只要您提供的值适合该比例。

• 或者，使用axis.ticks(parameters)您可以修改比例计算刻度线的方式。您可以使用的参数类型取决于您使用的比例类型——您指定的值将直接传递给比例的.ticks()方法，因此请查看每种比例类型的文档。（对于没有ticks()方法的序数尺度，参数将被忽略。）

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

So how do you get the behaviour you want (no decimal tick values)?

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

• Using .tickValues(), you would create an array of unique Y-values to be your ticks:

  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 );
  

  Be aware that this approach will use the specified y values even if they aren't evenly spaced. That can be useful (some data visualization books suggest using this approach as an easy way of annotating your graph), but some people may think your graph looks messy or broken.

• Using .ticks(), you would figure out the extent of your Y domain, and set the number of ticks so that you do not have more tick marks then you have integers available on your domain:

  var yDomain = yScale.domain(); 
  yAxis.ticks( Math.min(10, (yDomain[1] - yDomain[0]) );
  

  This will create the default (approximately 10) ticks for wide domains, but will create one tick per integer value when the difference between the max and min of your domain is less than 10. (Although the tick count is usually approximate, the scale will always prefer integer values if that matches the tick count specified.)

• 使用.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 时，将为每个整数值创建一个刻度。（虽然刻度计数通常是近似的，但比例尺会如果与指定的滴答计数匹配，则始终首选整数值。）

回答by aabiro

Yes you can also try

是的，你也可以试试

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

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

It does the trick of eliminating the decimal numbers, does not effect number of ticks

它消除了十进制数的技巧，不影响滴答数

Hereis a good resource for the format of the numbers using D3.

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