D3.js多線圖的轉換

我很奇怪，爲什麼相比於動畫折線圖正是基於這個多線圖的轉換是跳躍：這裏提供http://www.animatedcreations.net/d3/lineChartAnimated.html D3.js多線圖的轉換

小提琴： http://jsfiddle.net/user2477109/QBDGB/

問題是分別更新所有路徑嗎？它看起來效率不高。謝謝。

graph.select(".line1").attr("d", line).attr("transform", null); 
graph.select(".line2").attr("d", line).attr("transform", null); 
graph.select(".line3").attr("d", line).attr("transform", null); 
graph.select(".line4").attr("d", line).attr("transform", null); 

// slide the line left 
path1 
    .transition() 
    .duration(duration) 
    .attr("transform", "translate(" + x(t-n+1) + ")"); 

path2 
    .transition() 
    .duration(duration) 
    .attr("transform", "translate(" + x(t-n+1) + ")"); 

path3 
    .transition() 
    .duration(duration) 
    .attr("transform", "translate(" + x(t-n+1) + ")"); 

path4 
    .transition() 
    .duration(duration) 
    .attr("transform", "translate(" + x(t-n+1) + ")"); 

// slide the x-axis left 
    axis.transition() 
    .duration(duration) 
    .ease("linear") 
    .call(xAxis) 
    .each("end", tick);

來源

2013-06-25 user2477109

你忘了.ease('linear')選項：

path1 
    .transition() 
    .duration(duration) 
    .ease("linear")

小提琴：http://jsfiddle.net/chrisJamesC/QBDGB/4/

正如你應該考慮循環的四個線或作爲這裏使用另一個迭代器的線的話，你硬編碼行數

來源

2013-06-25 06:35:20

我不敢相信我錯過了！另外，我想知道爲什麼單行有連續的平滑重繪，但四行圖不？是否有可能通過多條線路實現這一效果？ – user2477109

只需在每次轉換時使用它，就像您在jsFiddle中看到的那樣。 –

D3.js多線圖的轉換

回答

相關問題