带有序数刻度的刻度？

Question

我一直很难让 Tick 与我在 D3 中玩过的东西一起工作。我仍然对 D3 感到困惑，但我学习它的次数越来越多。以我在网上找到的一个例子，我开始把它变成别的东西。

问题是，这使用了序数比例，我找不到在我的 xaxis 上设置刻度的方法。例如，我希望它显示第 10 个刻度。但到目前为止我还没有任何工作。

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

Answer 1

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

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

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

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

为此，您需要创建自己的函数来生成正确的值数组以供使用（或硬编码标签数组，如果它始终相同）。然后使用轴对象的.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 模 10) 为 10 的倍数的索引值返回 0。
• 对该结果取布尔值 not (!) 将返回 true 10 的倍数。
• 这将创建一个数组，其中仅包含您域中的每 10 个条目，然后您可以使用该数组显式设置轴的刻度值。

最后一件事：由于所有轴看到的是最终的值列表，因此它不会在数据发生时自动更改；您需要记住在数据更新时重做刻度值计算。

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

Answer 2

如果您希望以编程方式获取使用 rangeRoundBands 创建的序数刻度的“中心点”，您可以获取每个返回的 range() 值（每个波段的 x 开始），并添加 1/ rangeBand()中的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，如果你这样做的话。