更改x轴上的刻度线

Question

我想弄清楚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"); 

Answer 1

定量刻度的默认刻度是2,5和10的倍数。您似乎希望倍数为6;虽然不同寻常，但根据基础数据的性质，这可能有意义。所以，虽然你可以使用axis.ticks增加或减少滴答计数，它总是返回2，5和10的倍数 - 不6.

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

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

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