d3.js快速移动时间轴,最小重绘?

时间:2013-06-03 22:23:15

标签: time d3.js transition

Mike Bostock的D3.js路径转换示例之一显示了一个沿X轴有时间的图表,数据出现并向左移动,与轴(想想"监视器"显示如Windows上的任务管理器)。我试图做同样的事情,让时间顺利地向左移动。但有四个图表(所有相同的时间尺度)。

问题:Mike在每个tick上重新调用时间轴生成器。此时,这是图绘制中最昂贵的部分,大约90%的时间花费。任何人都有任何想法如何滚动左边的其他方式不需要每次重绘?我想过尝试预先创建一个轴,然后使用平移和剪切来显示相关的部分,但是想看看是否有其他人有更好的(即更快的)解决方案,或者知道某个地方的例子。

谢谢, 戴夫

1 个答案:

答案 0 :(得分:1)

有一个名为Cubism的D3插件框架,似乎可以完全按照您的描述进行操作。而且由于它建立在D3之上,你仍然可以自定义东西。

但是,如果您希望自己在D3中执行此操作,则可能需要查看他们使用的方法,该方法基于使用HTML5 Canvas将现有可视化向左移动而不是重新呈现它:

https://github.com/square/cubism/blob/master/src/horizon.js