我们如何更改由d3.js线图中的线性刻度生成的刻度值？ [英] How do we change the tick values generated by a linear scale in a d3.js line plot?

问题描述

我只有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文件，以绘制值为根据我的要求？

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轴创建的刻度线可以通过两种方式控制：

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

• 使用 axis.tickValues（arrayOfValues） 您可以显式设置要显示在轴上的值。通过将每个值传递到关联的比例来定位刻度，因此值应在您的比例范围内。

• 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.)

线性尺度， scale.ticks（）方法接受一个数字作为参数;然后，比例尺会大致生成 许多滴答，在域中以圆整数值均匀分布。如果您没有指定tick计数，默认值是创建大约10个tick，这就是为什么当您的域名从0到5时，您会在0.5个时间间隔上获得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.

那么如何获得所需的行为（没有小数点值）？

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

• 使用 .tickValues（），您将创建一个唯一Y值的数组作为您的记号：

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

请注意，这种方法将使用指定的y值，即使它们没有均匀间隔。这可能是有用的（一些数据可视化书建议使用这种方法作为一种简单的方式注释你的图），但有些人可能认为你的图表看起来混乱或破碎。

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.

使用 .ticks（），您会找出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:

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

b $ b

这将为宽域创建默认（大约10）个滴答，但当域的最大值和最小值之间的差小于10时，将为每个整数值创建一个滴答（尽管滴答计数为通常为近似值，如果符合指定的点击数，则标尺将始终优先使用整数值。）

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

这篇关于我们如何更改由d3.js线图中的线性刻度生成的刻度值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！