☰

d3 整数のみの目盛り 質問する

tag-icon • tag-icon d3.js axis
d3 整数のみの目盛り 質問する

0～3の範囲の値を持つd3棒グラフがあります。y軸に整数値のみを表示したいのですが、次のようにします。

var yAxis = d3.svg.axis().scale(y).orient("right").tickFormat(d3.format("d"));

ただし、非整数のマークにはまだ目盛りがあります。目盛りの形式を設定すると、それらのラベルのみが非表示になります。目盛りの数や目盛りの値を明示的に設定することもできますが、目盛りが整数値にのみ表示されるように指定できるようにしたいのです。それは可能ですか?

ここに画像の説明を入力してください

ベストアンサー1

の適切な解決策ティックを取得するには.ticks()メソッドで、整数だけを残すようにフィルタリングし、それを.tickValues():

const yAxisTicks = yScale.ticks()
    .filter(tick => Number.isInteger(tick));
const yAxis = d3.axisLeft(yScale)
    .tickValues(yAxisTicks)
    .tickFormat(d3.format('d'));

完全を期すためにここに説明がある他の解決策が悪い理由:

@BoomShakalaka ソリューション.tickSubdivide()存在しないメソッドを使用します。

@cssndrx と @kris のソリューションティックの数を指定する必要があるため、一般的な場合には機能しません。

おすすめ記事