D3線路更新動畫不平滑

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

我希望它做的是從當前行路徑動畫到新行路徑，並進行平滑過渡，以便不管數據數量如何，新值都不會卡入到位。另外，在一個側面說明中，圖形寬度在更新時不斷變化，無論有多少數據存在，我都希望它可以伸展到svg的整個寬度，我怎麼能實現這一點？

這裏是我到目前爲止的小提琴http://jsfiddle.net/znmBy/。

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

來源

2012-12-06 Odyss3us

您描述的問題有點複雜，因爲在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] 
      ]);

BTW：當動畫線圖，你通常有幾個其他的問題。其中一些在邁克的path animation page上覆蓋。還有一個相關的問題here。

編輯（聰明的解決方案）：你的繪圖函數中

而不是調用更新功能的兩倍，你可以實現這兩步衝這樣的：

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);

來源

2012-12-06 16:29:45 Juve

D3線路更新動畫不平滑

回答

相關問題