1

複数系列の折れ線グラフで遷移を設定するためのガイダンスを実際に使用できます。私が必要としているものの例として、私はこのすばらしい多系列折れ線グラフから始めました: http://bl.ocks.org/mbostock/3884955 . そのコードに、setInterval() を使用して 1 回呼び出される update() 関数を追加しました。また、data2.csv という新しいデータ セットも作成しました。これは、data.tsv に似ていますが、値が異なります。

update 関数は、折れ線グラフが表示しているデータを変更する必要があります。スムーズな移行を行うことは忘れてください。グラフ ビューでデータを更新することさえできません。更新機能を使ってみると、JavaScript 変数に新しいデータが正しく読み込まれているように見えますが、グラフの線はまったく変化しません。

この質問のバリエーションを数回見たことがありますが、まだ答えが見つかりません。このマルチシリーズの折れ線グラフを新しいデータセット (マルチシリーズも含む) に移行する方法を理解してくれる人はいますか?

function update() {

    d3.csv("data2.csv", function(error, data) {

    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

        // format the date
   data.forEach(function(d) {
        d.date = parseDate(d.date);
  });

    // rearrange the data, same as in the original example code
var cities2 = color.domain().map(function(name) {
        return {
          name: name,
          values: data.map(function(d) {
            return {date: d.date, temperature: +d[name]};
          })
        };
      });

    // update the .city g's to the new dataset
 var city2 = svg.selectAll(".city")
      .data(cities2);

    // redraw the lines with the new data??? 
  city2.selectAll("path")
      .attr("d", function(d) { return line(d.values); });

 clearInterval(transitionInterval);
});
}

更新: NikhilS の回答には、コメント トレイルに解決策の鍵が含まれています。

4

2 に答える 2

2

一般的な更新パターンに関する彼の資料で Mike Bostock によって概説されているように、enter + update プロセスに従っていることを確認する必要があります。どの種類の d3 も呼び出していないようですtransition。また、更新機能の開始または終了を指定していないため、新しいデータが入ってくる場合や古いデータが出て行く場合に問題が発生します。これを変更してみてください：

 var city2 = svg.selectAll(".city")
  .data(cities2);

 city2.selectAll("path")
  .attr("d", function(d) { return line(d.values); });

以下に：

 var city2 = svg.selectAll('.city')
   .data(cities2);

 var cityGroups = city2.enter().append('g')
   .attr('class', 'city');

 cityGroups.append('path')
  .attr('class', 'line');

 d3.transition().selectAll('.line')
  .attr('d', function(d) { return line(d.values); });

 city2.exit().remove();

しばらく前に、基本的なデータの再結合と更新のデモを作成しました。ここで表示できます。

于 2013-05-25T04:40:50.987 に答える