折线图显示给定时间段内的值（例如最近 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 的路径转换页面，还有一般更新模式教程..也许我在那里失明了。谢谢你的帮助！