在D3折線圖中平滑更新到x軸？

Question

我有一個例子動畫線圖位於：http://www.animatedcreations.net/d3/animatedLineChart.html

一切工作爲我會把它想，除了在圖形上線重繪不順暢，如在本頁面底部的例子：http://bost.ocks.org/mike/path/ 。另一個問題是線條和x軸稍微不同步。

我敢肯定，代碼問題出在.attr（「d」，行）如何被更新。任何幫助將非常感激 - 我一直堅持一段時間！提前致謝。

Answer 1

歡迎StackOverflow上！首先，請知道下一個問題，創建一個jsFiddle（或類似的）對於想要在這類問題中幫助你的用戶來說非常有用，因爲經常需要使用代碼。我創建了一個用的jsfiddle正是您的代碼在這裏：http://jsfiddle.net/peDzT/

我花了相當多的時間搞清楚什麼是在源代碼中發生的事情。這裏有幾點看法：

• 你有兩個嵌套svgs
• 在tick()，當你使用它path.attr("transform","null")什麼也不做。相反，你必須做`path.select（「。line」）。attr（「transform」，「null」）。
• 在其他attr.transform()電話，你忘了打電話給x()的說法。

最終結果：http://jsfiddle.net/chrisJamesC/YruDh/

爲了實現這個結果我被另一個例子啓發我以前所作，這在下面的（順便說一句有關）的問題引用：Real time line graph with nvd3.js