更改x軸上的刻度線

我想弄清楚d3.js。在定義軸時，如何在x軸上獲得自定義標籤。例如，默認的標籤我得到的是：更改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");

來源

2012-10-27 WeaklyTyped

定量刻度的默認刻度是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），可以使上限包含在內。

來源

2012-10-27 16:45:53 mbostock

哈哈！已經弄清楚了，並且親自來這裏回答這個問題，但無論如何，你的帖子確實有幫助。謝謝！ :) – WeaklyTyped

@mbostock，我有24個類別的定量規模，但添加.ticks（6）到我的xAxis什麼都不做 - 所有24個仍然顯示。有任何想法嗎？ –

[The d3 source code]（https://github.com/mbostock/d3/blob/f59fc64a20d57fe08be9fb6e53ab0022f6f6c732/test/svg/axis-test.js）現在說tickSubdivide已被棄用，並且什麼都不做。 – Seri

更改x軸上的刻度線

回答

相關問題