1

D3.js によって提供されるログ スケールに頭を悩ませようとしています。昨日の時点で、私は対数スケールが何であるかを知りませんでした。

練習のために、次の 4 つの値を持つデータセットを表示する縦棒グラフを作成しました[100, 200, 300, 500]。対数スケールを使用して高さを決定しました。

var y = d3.scale.log()
    .domain([1, 500])
    .range([height, 1]);

このスケールは機能しません (少なくとも y 軸にも適用された場合)。値 500 を表すバーは、svg コンテナーの上部に到達する必要があります。ドメインを[100, 500]そのバーに変更すると、上部に到達しますが、軸の目盛りはバーの適切な値に対応しません。4e+2 は 4*10^2 ですからね。

ここに来ていないのは何ですか？ここにフィドルがあります。

4

1 に答える 1

1

画面の上部から始まる SVG y 座標を考慮して、スケールは既に範囲を逆にしていdomain([min, max])ますrange([max, min])。これは、スケールがすでに y を直接計算しているため、y 位置と高さの計算を逆にする必要があることを意味します。

bars.append("rect")
    .attr("x", function (d, i) { return i * 20 + 20; })
    .attr("y", function (d) { return y(d); })
    .attr("width", 15)
    .attr("height", function (d) { return height - y(d); });

更新されたフィドルは次のとおりです。http://jsfiddle.net/findango/VeNYj/2/

于 2013-03-07T16:16:15.323 に答える