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");

圆没有在init函数中设置，它们只是即时添加的。 另一方面，对于该生产线，我不知道该如何完成。

我的问题的答案可能是链接或一些有用的技巧 ..我已经看过Mike Bostock的“路径转换”页面，也看过一般的更新模式教程。 谢谢你的帮助！

Answer 1

哇，终于找到了 。 好吧，没有按键绑定线。 这将使平滑过渡难以改变具有不同长度的数据，但是我很高兴我终于知道为什么我一直出错。

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

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