我已经尝试D3一两天了。所以我是一个D3新手,但是我有很多C/C++,Java,PHP,Javascript等背景。
我从教程页面github.com/mbostock/d3/wiki/Tutorials开始,仔细地研究了三个小圆圈--与Joins一起思考--如何首先逐字逐句地尝试示例,有时尝试不同的更改,看看我是否理解结果。
然后我跳到了条形图,第1部分和第2部分。
到第2部分结束时,我得到的结果与预期的差不多。本教程中只有代码片段,我在教程中没有看到“这里是您应该完成的完整结果”的地方,尽管如此,我还是得到了这个http://jsbin.com/oqetuw/2/edit,它看起来与本教程的工作原理相同。
注意,对于那些没有试过本教程的人,我要问的关键问题是重绘间隔,1500 ms,转换持续时间,1000 ms,以及转换轻松函数,这是教程没有使用或指定的,但我在googled中发现它默认为立方输入输出。
由于我的目标是在屏幕上连续平滑滚动,我将重绘间隔更改为1000,并将转换方便函数改为“线性”,结果是http://jsbin.com/ijumuv/1/edit。
这些是唯一的变化,如下所示:
$ diff tut2.09.html tut2.10.html
33c33
< }, 1500);
---
> }, 1000);
78a79
> .ease("linear")
82a84
> .ease("linear")
86a89
> .ease("linear")
奇怪的行为,因此问题是,为什么偶尔到达左侧边缘的栏杆似乎反弹和积累从左到右,在主栏杆后面?(偶尔也会被批准)
如果只取消1500 -> 1000的更改,问题似乎永远不会发生(因此,它每1.5s滚动一次,每个滚动持续时间为1s)。因此,如果D3还在忙着进行转换,那么它可能无法删除它们吗?或者其他一些我还不知道的解释。
提前谢谢你的建议。
发布于 2013-08-14 15:06:35
是的,d3转换有问题。当间隔和持续时间都为1000时,重绘操作很有可能发生在该选择的先前的transition()
完成之前。这会破坏数据绑定,或者类似的东西。
在调用下一个重绘转换之前,它会不断地检查先前的重绘转换是否已经完成。这绝不是“好的javascript",但它确实说明了这个问题,并在某种程度上绕过了它。要理解我添加的内容,只需查找代码中出现的所有__readyForNext
。应该是有道理的。
https://stackoverflow.com/questions/18239407
复制相似问题