D3多线图 - 奇怪的动画

Question

我创建了一个带有简单动画的多线图.在开始时没有数据,单击按钮后,模拟新值并向左"移动".使用"移位"动画移动.

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

小提琴可以在这里访问.

感谢帮助.

Answer 1

问题是,当有太多数据时,您正在删除数据.d3将数据与现有数据(当您调用.data()函数时)匹配的方式是索引.也就是说.data(),无论数据实际是什么样,传递给的数组中的第一个元素都匹配第一个绑定数据元素.

在您的情况下发生的情况是,一旦您开始删除数据,单个数据点将被更新而不是移位.这就是为什么你看到"波浪形" - 它将每个数据点更新为其新值,这是右边数据点之前的值.

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