折れ線グラフは、特定の期間 (過去 2 日間など) の値を 1 日 1 つずつ表示します。ユーザーはこの期間を変更できます (過去 4 日間など)。
問題: 行遷移が非常に見にくいです。問題はデータの変更だと思います：
state 1: => state 2:
days value days value
-------------- ---------------
today-2 5 today-4 3
today-1 8 today-3 9
today-2 5
today-1 8
上記の例では、たとえば、値が 5 だった前の最初のデータ ポイントが値 3 に遷移し、x 軸で今日の 4 に左にシフトされます。私が望んでいるのは、5 と 8 が右にシフトし、5 と 8 の値のままで、2 つの新しいデータ ポイントが 0 からステージに入るということです。悲劇の現在の状態を示すこの画像を見てください (1 週間から 4 週間への移行):
これで、新しいデータを添付するときにキーを割り当てることができることがわかりました (たとえば、この例では、キーは値の日付になります)。円 (このチャートでは非表示になっていて、値の上にマウスを置くと表示されます)。これらの円は完全に移行します。残念ながら、チャートの構成方法が原因で、ここの行でこれを機能させることができませんでした。
- 各チャートは、「空の」チャートを初期化する「init_chartX」関数によって作成されます (たとえば、線のパスを追加します)。
- 各チャートは「update_chartX」関数によって更新されます。
そのため、init 関数では、次の行を設定しました。
// Add paths for line1 and line2
svg.append("g")
.append("path")
.attr("class", "line1");
そして、更新機能でキーを使用してデータを追加しようとすると..
svg.selectAll(".line1").data(data, function (d) { return formatDate(d.date); })
..「d」が定義されていないため、結果は例外です。これは、init 関数で「 .line1 」要素が設定されているためだと思います。init 関数で設定されていない円で使用すると、問題なく動作します。
var dots1 = svg.selectAll(".circle1").data(data, function (d) { return formatDate(d.date); });
dots1.enter().insert("circle")
.attr("class", "circle1");
円は initfunction でセットアップされず、オンザフライで追加されます。一方、ラインについては、これを行う方法がわかりませんでした。
私の質問への答えは、リンクまたはいくつかの便利なヒントになる可能性があります..Mike Bostock の Path Transition ページと、一般的な更新パターンのチュートリアルは既に見ました..多分私はそこで盲目でした. 助けてくれてありがとう！