我用簡單的動畫創建了多線圖。在開始時沒有數據,點擊一個按鈕後會模擬新的值,並且線條「移動」離開。此舉採用「轉變」動畫。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。
感謝您的幫助。
你是一個固定例子的小提琴嗎? – Seanny123 2014-09-26 00:40:16
它尚未修復。 – 2014-09-26 11:14:55