2

我创建了一个带有简单动画的多折线图。一开始没有数据，点击按钮后，新值被模拟，“移动”线离开。使用“移位”为移动设置动画。

当线条“填充”整个图形区域（这意味着所有 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);

而不是行（这段代码对我帮助很大）

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

Fiddle 可在此处访问。

感谢帮助。

4

2 回答 2

5

问题是当数据太多时您正在删除数据。d3 将数据与现有数据（当您调用.data()函数时）匹配的方式是按索引。也就是说，您传递给的数组中的第一个元素.data()与第一个绑定的数据元素匹配，而不管数据的实际外观如何。

在您的情况下发生的情况是，一旦您开始删除数据，各个数据点就会更新而不是移动。这就是你看到“曲线”的原因——它将每个数据点更新为其新值，即右侧数据点之前的值。

使用您当前拥有的代码，这很难解决，因为您没有明确匹配各个行的数据。我建议您查看嵌套选择，它允许您绘制多条线并仍然显式匹配各个线的数据。关键是使用可选的第二个参数来.data()提供一个函数，告诉它如何匹配数据（参见文档）。这样你就可以告诉它一些数据点消失了，而其他的应该被移动。

于 2013-04-07T20:30:40.203 回答
2

您可以分两步解决这个问题。

在函数 update()中：重绘.data()并在末尾使用新点但不删除第一个旧点（带动画），就像每个键在转换前后都是相同的。

在函数 update()结束时：您可以删除旧值并重绘.data()而不使用动画。

于 2013-04-18T21:13:18.050 回答