我们如何更改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()方法接受一个数字作为参数; 然后,比例生成大约那么多的刻度,在域内均匀分布有圆数值.如果您没有指定刻度计数,则默认设置为创建大约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时,将为每个整数值创建一个刻度.(虽然刻度计数通常是近似值,但是刻度将是如果匹配指定的滴答计数,则始终优先选择整数值.)