d3 线过渡答案

【问题标题】：d3 line transitiond3 线过渡
【发布时间】：2013-11-08 22:48:52
【问题描述】：

折线图显示给定时间段（例如过去 2 天）内的值，每天一个值。用户可以更改此时间范围（例如过去四天）。

问题：换行真的很难看。我认为问题在于数据的变化：

state 1:      =>   state 2:
days     value     days      value
--------------     ---------------
today-2    5       today-4     3
today-1    8       today-3     9
                   today-2     5
                   today-1     8

例如，在上述情况下，之前值为 5 的第一个数据点现在转换为值 3，并在 x 轴上向左移动到今天的 4。我想要想要的是 5 和 8 向右移动并保持它们的值 5 和 8，而两个新数据点从 0 进入阶段。希望你能想象我意思是.. 如果不看看这张显示悲剧当前状态的图片（从 1 周过渡 => 4 周）：

现在，我知道在附加新数据时，可以分配一个键（例如，在本例中，键是值的日期）并且我已经为圆圈工作（隐藏在这个图表，并且仅在您将鼠标悬停在某个值上时可见）。这些圆圈完美过渡。不幸的是，由于我构建图表的方式，我无法在这里为这些线条工作，我猜：

每个图表都由一个“init_chartX”函数构建，该函数初始化一个 “空”图表（例如，为线条添加路径）
每个图表都由“update_chartX”函数更新。

所以在init函数中，我设置了一行：

// Add paths for line1 and line2
svg.append("g")
    .append("path")
    .attr("class", "line1");

当我尝试在更新函数中添加带有键的数据时..

svg.selectAll(".line1").data(data, function (d) { return formatDate(d.date); })

..结果是一个例外，因为“d”没有定义。我假设这是因为在 init 函数中设置了一个“.line1”元素，它在用于未在 init 函数中设置的圆圈时工作得很好：

var dots1 = svg.selectAll(".circle1").data(data, function (d) { return formatDate(d.date); });

dots1.enter().insert("circle")
    .attr("class", "circle1");

圆圈不是在 init 函数中设置的，它们只是动态添加的。另一方面，对于这条线，我不知道如何完成这项工作。

我的问题的答案可能是一个链接或一些有用的提示..我已经看过 Mike Bostock 的路径转换页面，还有一般更新模式教程..也许我已经看过在那里瞎了。感谢您的帮助！

【问题讨论】：

这个问题将为我赢得一个金色的风滚草徽章..

标签： javascript d3.js

【解决方案1】：

哇，终于找到this了。好吧，没有键绑定线。这将使更改具有不同长度的数据的平滑过渡变得更加困难，但我很高兴我终于知道为什么我不断收到错误..

编辑我找到了一个解决方案：在将数据附加到行之前反转数据。所以我上面的例子变成了：

state 1:      =>   state 2:
days     value     days      value
--------------     ---------------
today-1    8       today-1     8
today-2    5       today-2     5
                   today-3     9
                   today-4     3

过渡按预期进行。如此简单，愚蠢的我，我之前没有弄清楚。（x轴不受此影响，它仍在向右增长）

【讨论】：