Animation D3多折线图-奇怪的动画

我用一个简单的动画创建了一个多折线图。开始时没有数据，单击按钮后模拟新值，并向左移动行。该移动使用“shift”设置动画

当线条“填充”整个图形区域（这意味着所有x值都有y值），然后以不同的方式设置线条动画时，就会出现问题。看起来y值在曲线上设置了动画，而不是向左滑动

动画适用于两个轴：

svg.selectAll("g .x.axis")
  .transition()
  .duration(500)
  .ease("linear")
  .call(xAxis);
svg.selectAll("g .y.axis")
  .transition()
  .duration(500)
  .ease("linear")
  .call(yAxis);

而不是台词（帮了我很多忙）

这把小提琴很容易接近

---

谢谢您的帮助。

问题在于，当数据太多时，您正在删除数据。d3将数据与现有数据匹配的方式（当您调用

.data（）

函数时）是通过索引进行的。也就是说，传递给

.data（）

的数组中的第一个元素与第一个绑定的数据元素相匹配，而与数据的实际外观无关

在您的情况下，一旦开始删除数据，各个数据点就会更新，而不是移位。这就是为什么会看到“蠕动”——它将每个数据点更新为其新值，即右侧的数据点以前的值

---

对于您当前拥有的代码，这很难修复，因为您没有显式地匹配单个行的数据。我建议您看看哪条线允许您绘制多条线，并且仍然显式地匹配单个线的数据。关键是使用

.data（）

的可选第二个参数提供一个函数，告诉它如何匹配数据（请参阅）。通过这种方式，您可以告诉它一些数据点消失了，而其他的数据点应该被移动。

您可以通过两个步骤解决这个问题

在函数更新（）：在末尾使用新点重新绘制.data（），但不删除第一个旧点（带有动画），就像每个关键点在转换前后是相同的

---

在函数更新（）的结尾处：：您可以删除旧值并重新绘制.data（），而无需动画。

本条形图教程的第2部分也将提供帮助：感谢您的评论，但不清楚如何使用。条形图很容易理解，因为只有一组数据，条形图和折线图的数据差别很大（等值值与值数组）。Lars，你能帮我做一下嵌套选择吗？方法是调用

.selectAll（）.data（）

两次——第一次调用一行，第二次调用数据点。因此，在第一次调用中，您传入一个矩阵，其中每行包含一行的点。然后，基于此数据，对实际路径进行第二次选择，并添加路径元素。这在我链接到的教程中有更详细的解释——将表行视为行，将表单元格视为各行的数据点。您是否了解固定示例？它尚未固定。

svg.selectAll("g .city path")
  .data(processedData).transition().duration(500)
  .ease("linear")
  .attr("d", function(d, i) { return line(d.values); })
  .attr("transform", null);