多线图上的计时问题？

Question

我正在制作基于[编辑：不是Bostock的]示例的多线动画图表：

http://bl.ocks.org/atmccann/8966400

我希望线条与x轴上的日期值同步。如果我放慢图形（比如持续时间= 15000），我可以清楚地看到，在图的最早部分，绿线位于黑线之前。然后黑线移动到绿线之前。一起开始和结束。

这个问题在我的图表中突出显示，我正在绘制20行。在策划时，有些人显然领先于其他人。初始y值为零的线比在开始时爬到更高y值的线更远。 如何调整显示，以便两条线同时绘制相同的日期？

Answer 1

bl.ocks.org示例中的技术（顺便说一下，不是Bostock的）是基于线的长度动画，而不是它在y轴上的位置。如果要基于y轴位置进行动画处理，则必须使用其他技术。特别是对于20行，我建议如果它们有很多分数，就不建议动态更新每一行。但是，如果没有多少分，你可以这样做。

一种简单的方法是在图表中添加一个实体（白色）矩形，覆盖所有图形线。然后设置该矩形的左侧位置和宽度的动画，以显示随时间变化的线条。