在D3折线图中平滑更新x轴？

Question

我在此处有一个示例动画折线图：http://www.animatedcreations.net/d3/animatedLineChart.html

除了图表行上的重绘不像本页底部的示例中那样，所有内容都按照我的意愿运行：http://bost.ocks.org/mike/path/。另一个问题是线和x轴略微不同步。

我很确定代码的问题在于如何更新.attr（“d”，line）。任何帮助都将非常感激 - 我已经被困了一段时间！提前谢谢。

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