更改x轴上的刻度标记。

Question

36

我正试图弄清楚d3.js。在定义坐标轴时，如何在x轴上获取自定义标签？例如，我默认得到的标签是：

|------|------|------|------|------|------|
20    30     40     50     60     70     80

然而，我想要类似于这样的东西：

|------|------|------|------|------|------| ....
20    26      32    38     44     50     56

我目前正在学习并且正在使用官方提供的示例代码（稍作修改）进行工作：

var xAxis = d3.svg.axis().scale(x).tickPadding(7).orient("bottom");
var yAxis = d3.svg.axis().scale(y).tickPadding(5).orient("left");

- WeaklyTyped

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mbostock · Accepted Answer

用于定量比例尺的默认刻度是2、5和10的倍数。您似乎想要6的倍数；尽管不常见，但这可能取决于底层数据的性质。因此，虽然您可以使用axis.ticks来增加或减少刻度数，但它始终会返回2、5和10的倍数，而不是6。

如果您想要6的倍数，可以使用axis.tickValues来明确指定刻度值。通常与d3.range一起使用。例如：

xAxis.tickValues(d3.range(20, 80, 4));

如果您想动态计算值，请使用x轴比例尺的域来获取最低和最高值。还要记住，范围的上限是排除的，因此在上面的示例中，最大刻度值为76。您可以通过使范围的停止值稍微大一些（例如81）来使上限包容。