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

Question

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

Answer 1

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

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

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

Answer 2

完全に除外するのではなく、これらの値を非表示にするだけで十分であることに気づきました。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;
    });

Answer 3

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

その結果、軸はまったく表示されません。この動作は、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"))