如何改变d3中线性标度产生的刻度值。js情节?

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?

我只有5个值[1,2,3,4,5]作为d3中的y坐标。js的阴谋。但是，我最终得到了更多的值[0.5,1,1.5,2,2.5,3,3.5,4,4.5,5]有一种编辑d3的方法吗?js文件或html文件是否按我的要求绘制值?

1 个解决方案

#1

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.
使用axis.tickValues(arrayOfValues)可以显式地设置要在轴上显示的值。蜱虫通过将每个值传递给关联的标度来定位，因此这些值应该位于标度的域中。这适用于任何类型的标度，包括序数标度，只要您给出的值适合该标度。
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.)
另外，使用axis.tick(参数)，您可以修改scale计算刻度标记的方式。您可以使用的参数类型取决于您使用的比例类型——您指定的值将直接传递到比例的.tick()方法，因此请检查每个比例类型的文档。(对于没有tick()方法的序数标度，参数将被忽略。)

For linear scales, the scale.ticks() method accepts a number as a parameter; the scale then generates approximately that 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.
对于线性标度，scale.tick()方法接受一个数字作为参数;比例然后产生大约那么多的滴答声，均匀地间隔在具有整数值的域中。如果不指定滴答计数，默认情况下是创建大约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:
使用.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 );
```
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.
请注意，这种方法将使用指定的y值，即使它们的间隔不是均匀的。这可能是有用的(一些数据可视化书籍建议用这种方法来注释你的图形)，但是有些人可能认为你的图表看起来很乱或者很坏。
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:
使用.tick()，您可以计算出您的Y域的范围，并设置滴答数，这样您就不会有更多的滴答标记，那么您的域上就有了整数:
```
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.)
这将为宽域创建默认的滴答声(大约10)，但当域的最大值和最小值之间的差异小于10时，将为每个整数值创建一个滴答声。(虽然蜱虫计数通常是近似的，但是如果刻度与指定的蜱虫计数匹配，那么刻度将总是更喜欢整数。)

1 个解决方案

#1

更多相关文章

随机推荐