多线图上的计时问题?

时间:2015-04-14 18:23:33

标签: d3.js

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

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

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

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

1 个答案:

答案 0 :(得分:1)

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

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

相关问题