0

JavaScript と d3.js を使用してリアルタイム グラフを実装しました。データはランダムに生成され、乱数に基づいて変化します。折れ線グラフの下を塗りつぶしたいのですが、データが動いているので塗り方がわかりません！次のコードは静的チャートには適していますが、動的に移動するデータにどのように使用できますか

//Css part
.area {
fill: lightsteelblue;
stroke-width: 0;
}
//script 
var area = d3.svg.area()
.x(function(d, i) { return x(i); })
.y0(height)
.y1(function(d, i) { return y(d); });

svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);

そして、それが私のデータが生成される方法です：

var n = 100,
    random = d3.random.normal(0, 50),
    data = d3.range(n).map(random);

ありがとう、

4

1 に答える 1

1

エリアをリアルタイムで移動するには、かなりの作業を行う必要があります。幸いなことに、Mike Bostock がd3.js を使用したパス遷移に関する非常に優れたチュートリアルを作成しました。

キーコードは次のとおりです。

// push a new data point onto the back
data.push(random());

// redraw the line, and then slide it to the left
path
    .attr("d", area)
    .attr("transform", null)
    .transition()
    .ease("linear")
    .attr("transform", "translate(" + x(-1) + ")");
// pop the old data point off the front
data.shift();

また、ある時点で選択を使用する必要があることにも注意してください。そのためには、次のチュートリアルを参照してください: A Bar Chart, Part 2 .

これに、既に使用している面グラフの例を追加すると、ほぼ完了です。唯一の違いは、あなたが書くことです

ここで、次の質問からもインスピレーションを得ることができます: D3 折れ線グラフの x 軸をスムーズに更新しますか?

最後に、探しているものの実際の例を提供する jsFiddleを次に示します。

于 2013-06-27T06:16:15.910 に答える