D3線路徑更新動畫不流暢

Question

我有一個由區域，線條和圓圈組成的圖表，我正在嘗試更新用戶輸入，我已經開始工作，但是當從較低的數據量轉換到更高的數量時，例如從[4,2,3,4,5]到[2,4,3,1,5,8,6] ，這些線將其當前路徑設置為新位置的動畫，但是偏移剛剛被捕捉到位，沒有任何新的動畫添加到路徑的值。

我想要它做的是從當前行路徑動畫到新行路徑，並進行平滑過渡，這樣無論數據的數量如何，新值都不會卡入到位。

此外，在旁注中，圖表寬度在更新時不斷變化，我希望無論有多少數據存在，它都會延伸到svg的整個寬度，我怎么能實現這一點？

這是我到目前為止的一個小提琴http://jsfiddle.net/znmBy/ 。

我希望我很清楚，我是D3的新手，所以我對術語有點不確定。

Answer 1

您描述的問題有點復雜，因為在D3中您首先必須在固定位置添加對象，然后您可以將其從原始位置設置為另一個位置。

在您的示例中，我將根據先前的值計算新的（中間）初始位置，然后使用實際的最終值再次更新圖表。 這將從開始到最終位置創建一個漂亮的路徑動畫：

    updateGraph([
            [...].concat(computeLatestIntermediates()),
            [...].concat(getLatestTimes())
          ]);

    updateGraph([
            [...].concat(getRealValues()),
            [...].concat(getLatestTimes())
          ]);

或者，您可以將初始值設置為0 。 這將從底部到目標值創建一個漂亮的動畫：

    updateGraph([
            [..., 0, 0, 0, 0],
            [...,10,12,13,14]
          ]);

    updateGraph([
            [..., 234, 245, 210, 170],
            [...,  10,  12,  13,  14]
          ]);

順便說一句：在制作折線圖時，您通常會遇到其他幾個問題。 Mike的路徑動畫頁面中介紹了其中一些內容。 還有一個相關的問題在這里 。

編輯 （更智能的解決方案）：

您可以在繪圖函數中實現這樣的兩步繪制，而不是兩次調用更新函數：

function getPathData(d,i)        { return "M 0,0 ... L n,n"; }
function getInitalTransform(d,i) { return "translate(...)";  }
function getFinalTransform(d,i)  { return "translate(...)";  }

path
    .attr("d", getPathData)
    .attr("transform", getInitalTransform)
  .transition()
    .ease("linear")
    .attr("transform", getFinalTransform);