D3多線圖 - 奇怪的動畫

我用簡單的動畫創建了多線圖。在開始時沒有數據，點擊一個按鈕後會模擬新的值，並且線條「移動」離開。此舉採用「轉變」動畫。D3多線圖 - 奇怪的動畫

當「填充」整個圖形區域（這意味着所有x值都有y值），然後以不同方式對線條進行動畫時，會出現問題。它看起來像y值在曲線上動畫，而不是滑動到左邊。

動畫兩軸做工不錯：

svg.selectAll("g .x.axis") 
    .transition() 
    .duration(500) 
    .ease("linear") 
    .call(xAxis); 
svg.selectAll("g .y.axis") 
    .transition() 
    .duration(500) 
    .ease("linear") 
    .call(yAxis);

而不是線（this code幫了我很多）

svg.selectAll("g .city path") 
    .data(processedData).transition().duration(500) 
    .ease("linear") 
    .attr("d", function(d, i) { return line(d.values); }) 
    .attr("transform", null);

小提琴是訪問here。

感謝您的幫助。

來源

2013-04-07 Karel Frajták

你是一個固定例子的小提琴嗎？ – Seanny123 2014-09-26 00:40:16

它尚未修復。 – 2014-09-26 11:14:55

問題是，如果數據太多，您正在刪除數據。 d3將數據與現有數據匹配的方式（當您調用.data()函數時）是按索引進行的。也就是說，您傳遞給.data()的數組中的第一個元素與第一個綁定的數據元素匹配，而不管數據的實際外觀如何。

在你的情況下會發生什麼情況是，只要開始刪除數據，單個數據點就會被更新而不是移位。這就是爲什麼你會看到「squiggle」 - 它將每個數據點更新爲新的值，這是右側數據點之前的值。

隨着您目前的代碼，這是很難解決，因爲你沒有明確匹配個別行的數據。我建議你看看nested selections，它允許你繪製多行，並且仍然明確地匹配個別數據。關鍵是使用.data()的可選第二個參數來提供一個函數，告訴它如何匹配數據（請參閱the documentation）。這樣你可以告訴它一些數據點消失了，其他數據點應該被移動。

來源

2013-04-07 20:30:40

此條形圖教程的第2部分也將有所幫助：http://mbostock.github.io/d3/tutorial/bar-2.html – 2013-04-07 22:28:51

感謝您的評論，但尚不清楚。條形圖很容易理解，因爲只有一組數據，並且條形圖和折線圖的數據之間的差異很大 - isovlated值與值數組之間的差異）。拉爾斯，你能幫助我嵌套選擇嗎？ – 2013-04-08 10:29:39

想法是，你可以調用'.selectAll（）。data（）'兩次 - 第一次爲一行，第二次調用數據點。因此，在第一次調用中，您傳遞一個矩陣，其中每行包含一行的點。然後，根據這些數據，爲實際路徑進行第二次選擇並添加路徑元素。這在我已經鏈接到的教程中有更詳細的解釋 - 將表格行看作行，將表格單元看作單獨行的數據點。 – 2013-04-08 12:49:12

你可以在2步中解決這個問題。

在 功能更新

（）：重繪你。數據（）新點結束，但不刪除第一個舊點（動畫），這樣每個鍵是切換前後相同。

在功能更新結束時（）：您可以刪除舊值和重繪。數據（）沒有動畫。

來源

2013-04-18 21:13:18 Alban

D3多線圖 - 奇怪的動畫

回答

相關問題