更改 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

然而，我想要这样的东西:

Whereas, I want something like:

|------|------|------|------|------|------| ....
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、5 和 10 的倍数.您似乎想要 6 的倍数；尽管不寻常，但这可能是有意义的，具体取决于基础数据的性质.因此，虽然您可以使用 axis.ticks 来增加或减少滴答计数，但它会总是返回 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 的域来检索最低和最高值.还要记住，范围的上限是不包括的，因此在上面的示例中，最大刻度值为 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屋！