1

D3.jsを使って線を引こうとしています。これらは、一定期間にわたって間隔を置いて取得されたサンプルです。xの時間軸で描きたい。データの各ポイントは配列内の単なるインデックスであり、d3.time.scale を呼び出す前に軸を手動で再スケーリングする必要がないように軸を設定する方法がわかりません。

スケールをきれいにする方法を知っている人はいますか？

私のコードからのスニペット。私の実際のコードはデータをダウンロードし、グラフで変換されたさまざまなオフセットを使用して、さまざまな期間にわたって多くの線を描画します。

// input data
var start_time = 1352684763;
var end_time = 1352771163;
// data is exactly 100 samples taken between start_time and end_time
var data = [140,141,140,140,139,140,140,140,140,141,139,140,54,0,0,0,0,0,0,0,0,0...]
var y_max = d3.max(data);

// graph
var scale_x = d3.time.scale().domain([start_time, end_time]).range([0, 100]);
var scale_y = d3.scale.linear().domain([0, y_max]).range([height, 0]);
var step = (end_time - start_time)/100;
function re_scale(x) { return start_time + x*step; }

// for x, rescale i (0..99) into a timestamp between start_time and end_time before returning it and letting scale_x scale it to a local position. Awkward.
var line = d3.svg.line()
    .x(function(d, i) { return scale_x(re_scale(i)); })
    .y(scale_y)
    .interpolate('basis')

var g = graph.selectAll("g")
    .append('svg:path')
    .attr('d', function(d) { return line(data); })

// also draw axis here...
4

1 に答える 1

0

「ドメイン」はデータ内のスパンを参照し、「範囲」は画面上のスパンを参照する必要があります。

現時点では.range([0, 100])、scale_x をピクセル数として解釈しています。これを変更.range([0, width])すると、再スケーリングする必要なく機能するはずです。

d3.time.scale() は、適切な軸を生成するために開始点と終了点を知るだけで済みます。ただし、すべてのデータポイントに目盛りが必要な場合は、 docsでこれを行うオプションがあります。

于 2012-11-23T07:30:14.650 に答える