web-dev-qa-db-ja.com

d3.svg.axisを整数ラベルに制限するにはどうすればよいですか？

グラフに表示されるd3.svg.axis整数ラベルの数を制限する可能性はありますか？たとえば、このグラフを見てください。ここにはサイズが5つしかありません：[0, 1, 2, 3, 4]。ただし、ティックは.5, 1.5, 2.5および3.5についても表示されます。

enter image description here

javascriptd3.jsaxislabelsaxis-labels
39
Gajus

独自のフォーマット関数を作成する代わりに、d3.formatを使用できるはずです。

d3.svg.axis()
    .tickFormat(d3.format("d"));

また、軸がデフォルトで自動的に使用するスケールでtickFormatを使用することもできます。

59
Bill

完全に除外するのではなく、これらの値を非表示にするだけで十分であることに気付きました。これは、tickFormat（https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format）を次のように使用して実行できます。

d3.svg.axis()
    .tickFormat(function(e){
        if(Math.floor(e) != e)
        {
            return;
        }

        return e;
    });
17
Gajus

TickFormatとしてのd3.format("d")の使用は、すべてのシナリオで機能するわけではありません（ このバグを参照 ）。 Windows Phoneデバイス（およびおそらく他のデバイス）では、計算が不正確であると、ティックが整数として正しく検出されない場合があります。 e。 「3」のティックは2.9999999999997として内部的に格納される場合があり、d3.format("d")の場合は整数ではありません。

その結果、軸はまったく表示されません。この動作は、最大10の目盛り範囲で特に顕著になります。

考えられる解決策の1つは、イプシロン値を指定してマシンエラーを許容することです。値はこのように正確な整数である必要はありませんが、イプシロンの範囲までの次の整数とは異なる場合があります（データエラーよりもかなり低いはずです）。

var epsilon = Math.pow(10,-7);

var axis = d3.svg.axis().tickFormat(function(d) {
    if (((d - Math.floor(d)) > epsilon) && ((Math.ceil(d) -d) > epsilon))
        return;
    return d;
}

他のスレッドでも言及されている別の解決策は、固定ティックカウントを指定してから、ティック（現在は「ほとんど」の整数）を最も近い整数に丸めることです。これが機能するには、データの最大値を知る必要があります。

var axis = d3.svg.axis().ticks(dataMax).tickFormat(d3.format(".0f"))
5
Marcus Krahl