顺利更新X轴D3线图中？ [英] Smooth update to x axis in a D3 line chart?

问题描述

我有设在这里的例子动画折线图： http://www.animatedcreations.net/ D3 / animatedLineChart.html

I have an example animated line chart located here: http://www.animatedcreations.net/d3/animatedLineChart.html

一切工作，因为我想它想，除了在图形上线重绘不光滑如在本页面底部的例子：的 http://bost.ocks.org/mike/path/ 。另一个问题是，该线与X轴稍微不同步。

Everything is working as I would like it to, except that the redraw on the graph line is not smooth as in the example at the bottom of this page: http://bost.ocks.org/mike/path/. Another problem is that the line and x axis are slightly out of sync.

我是pretty确保用code中的问题出在.attr（D，线）怎么被更新。任何帮助将非常AP preciated - 我已经坚持了一段时间！先谢谢了。

I am pretty sure the problem with code lies in how .attr("d", line) is updated. Any help would be very much appreciated - I've been stuck for a while! Thanks in advance.

推荐答案

欢迎StackOverflow上！首先，请知道下一个问题，在创建的jsfiddle（或类似）可以是谁想要帮助你在这样的问题，因为与code打，常常需要用户非常有用。我创建了一个与的jsfiddle你究竟code在这里： http://jsfiddle.net/peDzT/

Welcome on StackOverflow! First of all, please know for next question that creating a jsFiddle (or similar) can be quite useful for users who want to help you in this kind of problem as playing with the code is often necessary. I created a jsFiddle with exactly your code here: http://jsfiddle.net/peDzT/

我已经花了相当多的时间搞清楚什么是在你的源$ C ​​$ C发生。这里有几句话：

I have spent quite a bit of time figuring out what was happening in your source code. Here are a few remarks:

• 您有两个嵌套svgs


• 在打勾（），当你使用 path.attr（改造，空）它什么也没做。相反，你需要做的`path.select（线）。ATTR（改造，空）。


• 在其他 attr.transform（）电话，你忘了叫 X（）上的说法。

• You have two nested svgs
• In tick(), when you use path.attr("transform","null") it does nothing. Instead you have to do `path.select(".line").attr("transform", "null").
• In the other attr.transform() call, you forgot to call x() on the argument.

最终结果： http://jsfiddle.net/chrisJamesC/YruDh/

为了达到这个结果我被我做了previously，这在下面的（顺便说一句相关的）问题引述另一个例子启发：的实时线图与nvd3.js

In order to achieve this result I got inspired by another example I made previously, which is quoted in the following (related btw) question: Real time line graph with nvd3.js

这篇关于顺利更新X轴D3线图中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！