x軸のティックを変更してください

Question

私はd3.jsを把握しようとしています。軸を定義する際に、どのようにx軸にカスタムラベルを付けることができますか？例えば、私が得るデフォルトの標識がある：私は現在、それを学習し、供給公式の例からコード（わずかに修正）に取り組んでいます

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

：

一方

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

、私のような何かをしたい

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スケールのドメインを使用して最低値と最高値を取得します。また、範囲の上限は排他的ですので、上記の例では最大のティック値は76です。範囲の停止値を少し大きくする（たとえば、81）ことで上限を含むことができます。