D3.js 多折线图上的时间问题？

我正在基于[编辑：非博斯托克]示例制作多行动画图表：

我希望这些行显示为与x轴上的日期值同步。如果我减慢图表的速度（假设持续时间=15000），我可以清楚地看到，在图表的最早期部分，绿线在黑线之前。然后黑线移到绿线的前面。两者同时开始和结束

这个问题在我绘制的20条线的图表中得到了强调。在策划时，有些人明显领先于其他人。初始y值为零的直线比开始时上升到更高y值的直线要快。

---

如何调整显示，使两条线同时绘制同一日期

bl.ocks.org示例中的技术（顺便说一句，它不是Bostock的）是基于线的长度而不是它在y轴上的位置来设置动画的。如果要基于y轴位置设置动画，则必须使用不同的技术。特别是对于20行，如果它们有很多点，我不建议尝试动态更新每一行。不过，如果没有太多要点，你可以这样做

---

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

我认为，如果采用这种方式设置扩展矩形的动画，那么最好将该矩形设置为剪辑路径，而不是白色的“封面”，特别是因为后者可能会掩盖其他不应该涵盖的图表元素。和。如果您想可视化正在发生的事情，请注释掉

fill:none覆盖中的css规则。与剪辑路径完美配合，这对我来说是新的。谢谢你的新技术和方法