1

我已经尝试 D3 一两天了。所以我是一个 D3 新手，但有很多 C/C++、Java、PHP、Javascript 等背景。

我从教程页面 github.com/mbostock/d3/wiki/Tutorials 开始，相当细致地完成了 - 简介 - 三个小圆圈 - 用连接思考 - 选择如何工作 首先逐字尝试示例，有时尝试不同的更改，看看我是否了解结果。

然后我跳到了条形图，第 1 部分和第 2 部分。

在第 2 部分结束时，我得到的结果几乎完全符合预期。本教程只有代码片段，我在教程中没有看到“这是你应该最终得到的完整结果”的地方，尽管如此，我最终还是得到了这个http://jsbin.com/oqetuw/2/edit，它看起来与本教程的工作方式相同。

请注意，对于那些没有尝试过本教程的人，我要问的关键点是重绘间隔，1500 ms，过渡持续时间，1000 ms，以及本教程没有使用或指定的过渡缓动功能，但我用谷歌搜索发现它默认为立方进出。

由于我的目标是在屏幕上连续平滑滚动，我将重绘间隔更改为 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.5 秒滚动一次，每个滚动持续时间为 1 秒）。因此，如果 D3 仍在忙于进行过渡，似乎可能无法删除它们？或者我还想不通的其他解释。

提前感谢您的任何提示。

4

1 回答 1

0

是的，d3 转换存在问题。当间隔和持续时间都为 1000 时，重绘操作很有可能在transition()该选择的先验完成之前发生。这与数据绑定或类似的东西混淆了。

我修改了您的代码，使其在调用下一个重绘转换之前不断检查上一个重绘转换是否已完成。这绝不是“好的javascript”，但它确实说明了这个问题，并以某种方式解决了这个问题。要了解我添加的内容，只需__readyForNext在代码中查找所有出现的 。这应该是有道理的。

于 2013-08-14T23:06:35.480 回答