Question

我一直很难找到我在D3中玩过的东西。我还在玩弄D3，但我一直在学习它。以我在网上发现的一个例子为例，我开始把它变成其他东西。

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

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

Answer 1

正如您所发现的，序数比例doesn't have a ticks function可生成一定数量的刻度线。相反，轴对象使用比例域中的整个值集来创建刻度。

这在一般情况下是有意义的，因为不能总是在序数量表的类别值之间进行插值。正如我described it previously

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

也就是说，在许多情况下，类别确实具有自然顺序（真正的“序数”数据而不是纯粹的分类数据），而有意义跳过标签。

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

例如，在previously linked answer（这实际上是关于控制线性刻度上的刻度线的问题），我展示了如何使用d3 time interval range之一来生成刻度值。

对于您的情况，可以使用基于索引过滤域数组的方法：

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

说明：

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

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

P.S。 This answer has more on controlling tick values, although most of the options only work with linear scales

Answer 2

如果您希望以编程方式获取使用rangeRoundBands创建的序数比例的“中心点”，则可以获取每个返回的range()值（每个波段的x个开头），并添加rangeBand()的1/2（乐队的宽度）：

var ordScale = d3.scale.ordinal().domain(['a','b','c']).rangeRoundBands([0, 100], .1, .1);

var rangeBand = ordScale.rangeBand();

var ticks = ordScale.range().map(function(r) {
  return r + (rangeBand / 2);
});

编辑： There are also helpers for just simply creating an Axis，如果这就是你要做的事。

顺序刻度？

2 个答案: