d3线转换

Question

折线图显示给定时间段（例如最近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");

初始函数中没有设置圆圈，它们只是即时添加。另一方面，对于这条线，我无法弄清楚如何完成这项工作。

我的问题的答案可能是一个链接或一些有用的提示 ..我已经看过Mike Bostock的Path Transition页面，也是一般的更新模式教程..也许我已经在那里失明了。谢谢你的帮助！

Answer 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轴不受此影响，它仍在向右生长）