web-dev-qa-db-ja.com

整数のみのd3目盛り

値の範囲が0〜3のd3棒グラフがあります。 y軸に整数値のみを表示したいのですが、これは

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

ただし、整数以外のマークには目盛りが残っています。目盛りフォーマットを設定すると、それらのラベルのみが非表示になります。目盛りの数または目盛りの値を明示的に設定できますが、目盛りが整数値でのみ表示されるように指定できるようにしたいだけです。それは可能ですか？

enter image description here

d3.jsaxis
27
Jeff Storey

以下のように、.ticks（4）と.tickSubdivide（0）を追加できます。

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .ticks(4)
.tickFormat(d3.format("d"))
    .tickSubdivide(0);
16
Boom Shakalaka

適切な解決策は、 .ticks() メソッドを使用してティックを取得し、それらをフィルタリングして整数のみを保持し、それらを .tickValues() に：

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

完全を期すために、ここに説明があります他のソリューションが悪い理由：

@ BoomShakalaka solution は存在しない.tickSubdivide()メソッドを使用します。

@ cssndrxおよび@krisソリューション ティック数を指定する必要があるため、一般的なケースでは機能しません。

4
diraria

ティック数をプログラムでdata.length - 1に設定できます（これにより、ティック数が少ない場合に発生していた問題も解決されます）。

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .tickFormat(d3.format("d"))
    .ticks(data.length - 1)
4
cssndrx

記載されているすべての解決策から、目盛りを取り除くことができませんでした。

.xAxis().ticks(4)
.tickFormat(d3.format("d"));

ラベルは削除しますが、目盛りは削除しません。

だから私はticks（）にしきい値を適用することを提案します。 4未満の場合は、制限自体（0、1、2、3）に設定されます。で行われます：

.on("preRedraw", function(chart) {
    var maxTick = chart.group().top(1)[0].value;
    if (maxTick < 4) {
      chart.xAxis().ticks(maxTick);
    } else {
      chart.xAxis().ticks(4);
    }

}）;

Jsfiddleは https://jsfiddle.net/PBrockmann/k7qnw3oj/ から入手できます。

より簡単な解決策があるかどうか教えてください。よろしく

1
PBrockmann

このTIPを使用して、動的チャート（ページ上の1つ以上のチャート）でこれを機能させました

これでうまくいきました。 Math.min（maxHeight + 1、yAxis.ticks（））に変更したので、グラフの高さが目盛りの数より少ない場合は、目盛りの数が減ります。 – Jeff Storey 12年12月28日2:47

  // It is either 10 or Maximum Chart height + 1 

        var graphValues = selection.data()[0].map(function(obj) {
            return obj['count'];
        }).compact();  

        Array.prototype.maxValArray = function() {
          return Math.max.apply(null, this);
        };

        var maxValue = graphValues.maxValArray();

        yAxis.ticks(Math.min(maxValue + 1, 10))
0
kris