顺序刻度?

Joh*_*Sly 0 javascript d3.js

我一直很难找到我在D3中玩过的东西.我还在玩弄D3,但我一直在学习它.举一个我在网上找到的例子,我开始把它变成别的东西.

问题是,这使用了序数比例,我找不到在我的xaxis上设置滴答的方法.我很乐意让它以10号为例显示出来.但到目前为止我还没有任何工作.

这是一个链接:http://freeptools.com/mapster/testing-funny2.php

Ame*_*aBR 13

正如你已经发现,一个有序的规模不具有ticks功能产生刻度线的定数.相反,轴对象使用比例域中的整个值集来创建刻度.

这在一般情况下是有意义的,因为不能总是在序数量表的类别值之间进行插值.正如我之前所描述的那样

[序数比例的值]假定为不同的类别,可能没有自然顺序.它们可能是"苹果","橙子"和"香蕉".根据相邻标签("苹果"和"香蕉")的值,无法估计中间值("橙子"),因此默认情况下会显示所有标签,即使它们最终重叠且不可读.

也就是说,在许多情况下,类别确实具有自然顺序(真正的"序数"数据而不是纯粹的分类数据),跳过标签确实有意义.

要做到这一点,您需要创建自己的函数来生成要使用的正确值数组(或者如果标签数组始终相同则对其进行硬编码).然后使用轴对象的.tickValues(array)函数显式设置这些刻度值.

例如,在先前链接的答案中(实际上是关于在线性刻度上控制刻度的问题),我展示了如何使用d3时间间隔范围之一来生成刻度值.

对于您的情况,基于索引过滤域数组的方法可能有效:

var ticks = scale.domain().filter(function(d,i){ return !(i%10); } );
axis.tickValues( ticks );
Run Code Online (Sandbox Code Playgroud)

说明:

  • 如果scale是您的序数比例,则调用domain()不带参数的方法将返回所有值的数组.
  • 标准数组filter()方法创建一个新数组,该数组仅包含传递给过滤器函数时返回true的元素.
  • i%10(i模10)对于10的倍数的索引值返回0.
  • 取该!结果的布尔值not()将返回true10的倍数.
  • 这将创建一个只包含域中每第10个条目的数组,然后使用该数组显式设置轴的刻度值.

最后一件事:因为所有轴都是最终的值列表,所以当数据出现时它不会自动改变; 你需要记住在数据更新时重做滴答值计算.

PS 这个答案在控制刻度值方面有更多,尽管大多数选项仅适用于线性刻度.