更改x轴上的刻度 [英] Change the ticks on x-axis

问题描述

我想弄清楚d3.js。定义轴时，如何在x轴上进行自定义标签。例如，我得到的默认标签是：

I am trying to figure out d3.js. While defining the axis, How can I get custom labeling on x-axis. For example, the default labeling I get is:

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

然而，我想要的是：

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

我目前正在学习从提供的官方示例处理代码（略有修改）：

I am currently learning it and working on code (slightly modified) from official examples supplied:

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

推荐答案

定量刻度的默认刻度是2的倍数，你似乎想要6的倍数;虽然不寻常，但这可能有意义，取决于底层数据的性质。因此，虽然您可以使用 axis.ticks 来增加或减少tick计数，将总是返回2，5和10的整数 - 而不是6。

The default ticks for quantitative scales are multiples of 2, 5 and 10. You appear to want multiples of 6; though unusual, this could make sense depending on the nature of the underlying data. So, while you can use axis.ticks to increase or decrease the tick count, it will always return multiples of 2, 5 and 10 — not 6.

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

If you want multiples of 6, you can use axis.tickValues to specify the tick values explicitly. This is typically used in conjunction with d3.range. For example:

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

如果要动态计算值，请使用x-scale的域检索最低和最高值。还要记住，范围的上限是排他的，因此在上面的例子中，最大的tick值是76.你可以通过使范围的停止值略大（例如，81）来使上限包含。

If you want to compute the values dynamically, use the x-scale’s domain to retrieve the lowest and highest value. Also keep in mind that the upper bound of the range is exclusive, so in the above example the largest tick value is 76. You can make the upper bound inclusive by making the stop value of the range slightly bigger (e.g., 81).

这篇关于更改x轴上的刻度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！