d3線過渡

Question

折線圖顯示給定時間段內（例如最近2天）的值，每天一個值。 用戶可以更改此時間范圍（例如最近四天）。

問題：線路過渡確實很丑陋。 我認為問題出在數據變化：

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的值，而兩個新數據點從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");

圓沒有在init函數中設置，它們只是即時添加的。 另一方面，對於該生產線，我不知道該如何完成。

我的問題的答案可能是鏈接或一些有用的技巧 ..我已經看過Mike Bostock的“路徑轉換”頁面，也看過一般的更新模式教程。 謝謝你的幫助！

Answer 1

哇，終於找到了 。 好吧，沒有按鍵綁定線。 這將使平滑過渡難以改變具有不同長度的數據，但是我很高興我終於知道為什么我一直出錯。

編輯我找到了一個解決方案：將數據附加到行之前反轉數據。 所以我的例子從上面變成：

state 1:      =>   state 2:
days     value     days      value
--------------     ---------------
today-1    8       today-1     8
today-2    5       today-2     5
                   today-3     9
                   today-4     3

並且過渡按預期工作。.太簡單了，愚蠢的我以前沒弄清楚。 （x軸不受此影響，它仍在向右移動）