更改x轴上的刻度

时间:2012-10-27 12:48:01

标签: d3.js

我想找出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");

1 个答案:

答案 0 :(得分:64)

定量尺度的默认刻度是2,5和10的倍数。您似乎需要6的倍数;虽然不寻常,但根据底层数据的性质,这可能是有意义的。因此,虽然您可以使用axis.ticks来增加或减少滴答计数,但它总是会返回2,5和10的倍数 - 而不是6。

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

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

如果要动态计算值,请使用x-scale的域来检索最低和最高值。另外请记住,范围的上限是独占的,因此在上面的示例中,最大刻度值为76.您可以通过使范围的停止值稍大(例如,81)来使上限包含在内。 / p>

相关问题