我现在一直在尝试D3一两天。所以我是D3新手,但有很多C / C ++,Java,PHP,Javascript等背景。
我从教程页面github.com/mbostock/d3/wiki/Tutorials开始,并且非常认真地通过 - 介绍 - 三个小圆圈 - 与加入思考 - 选择如何工作 首先尝试逐字逐句,有时尝试不同的变化,看看我是否理解结果。
然后我跳到了条形图,第1部分和第2部分。
我最终得到的结果与第2部分结尾的结果完全一样。本教程只有代码片段,我没有在教程中看到一个位置,它说“这里是你应该结束的完整结果尽管如此,“我最终得到了这个http://jsbin.com/oqetuw/2/edit,它看起来与教程完全相同。
对于那些没有尝试过本教程的人,我要问的关键点是重绘间隔,1500毫秒,转换持续时间,1000毫秒,以及转换简易功能,本教程不使用或指定,但我已经用谷歌搜索它发现它默认为立方输出。
由于我的目标是在屏幕上连续平滑滚动,我将重绘间隔更改为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 - &gt; 1000更改,问题似乎永远不会发生(所以它每1.5秒滚动一次,每个滚动持续时间为1秒)。所以看起来D3似乎还在忙着转换,它无法删除它们?或其他一些我无法想象的解释。
提前感谢任何提示。
答案 0 :(得分:0)
是的,d3过渡存在问题。当间隔和持续时间均为1000时,重绘操作很有可能在该选择的先前transition()
完成之前发生。这与数据绑定混淆,或类似的东西。
我modified your code,以便在调用下一个重绘过渡之前不断检查先前的重绘过渡是否已完成。这绝不是“好的javascript”,但它确实说明了问题,并以某种方式解决它。要了解我添加的内容,只需查看代码中出现的所有__readyForNext
。它应该是有道理的。