6

http://bost.ocks.org/mike/path/の指示に従って、単一の線で単一のグラフを作成およびアニメーション化しました。

そして、グラフに複数の線を作成する方法を理解しました：D3.jsで複数の線を描画する

主な問題：新しいデータをシフトしてデータ配列にプッシュした後、複数の行を遷移するのに苦労しています。

次のようにN行を作成します:(時間：エポック時間、前進）

var seriesData = [[{time:1335972631000, value:23}, {time:1335972631500, value:42},...],
                  [{time:1335972631000, value:45}, {time:1335972631500, value:13},...],
                  [{time:1335972631000, value:33}, {time:1335972631500, value:23},...}],
                  [...],[...],...
                  ];

var seriesColors = ['red', 'green', 'blue',...];

line = d3.svg.line()
        .interpolate(interpolation)
        .x(function(d) { return x(d.time); })
        .y(function(d) { return y(d.value); });

graphGroup.selectAll(".line")
        .data(seriesData)
            .enter().append("path")
            .attr("class", "line")
            .attr("d", line)
            .style('stroke', function(d, i) { return seriesColors[i]; })
            .style('stroke-width', 1)
            .style('fill', 'none');

そして、次のメソッドを呼び出すJavascript setInterval（...）でN行を更新しようとしています。

graph.selectAll("path")
    .data(seriesData)
    .attr("transform", "translate(" + x(1) + ")")
    .attr("d", line)
      .transition()
    .ease("linear")
    .duration(transitionDelay)
    .attr("transform", "translate(" + x(0) + ")");

初期セットを完全に描画できますが、データ配列を更新するとすぐに線が消えます。

UPDATE 01

上記の例示的なseriesDataを使用した場合、私の例はおそらく機能するため、xでエポック時間の値を使用していることに気付きました（xAxisはdate：timeを示しています）。

問題は、x（1）を使用した「変換」、「変換」、x（0）が膨大な数を返し、グラフを遷移する必要があるよりもはるかに大きいことでした。

手動アプローチを使用するように、更新 N行メソッド（上記）を変更しました。

新しい問題： グラフは正しく左に移動しますが、線/グラフは右に戻り、各setInterval更新が実行されます。

seriesData配列を正しくプッシュ/シフトしますが、実際に描画されている新しいデータを表示するために左にスクロールし続けることはありません。

graph.selectAll("path")
        .data(seriesData)
        .attr("d", line)
        .attr("transform", null)
          .transition()
        .ease("linear")
        .duration(2000)
        .attr("transform", "translate(-200)");

私が使用した別のリファレンスはこれです：http：//bl.ocks.org/1148374

何かご意見は？

4

1 に答える 1

1

エラーの可能性として私に飛び出すことの1つは、使用されるデータ呼び出しです。イニシャルは

.data(seriesData)

アップデートは使用します

.data([seriesData])

これは問題を引き起こす可能性がありますが、残りの部分を見ないとわかりにくいので、おそらくjsfiddleに載せることができますか?

于 2012-05-01T22:06:31.390 に答える