javascript - D3 js 在快速鼠标单击时出现意外行为

Question

我有一个使用 D3 的多线图表，并且线条有节点来标记点。我还在 x 轴下方添加了图例，以便在用户单击它们时显示或隐藏每行。类似这个example

当我正常单击图例时，图表和图例选择工作完全正常。但是，当我快速单击图例时，其中一条线的节点消失了。当我检查页面时，我发现它们被重新定位到浏览器窗口的顶部(并且不可见，因为那里没有 svg 元素)

我什至不知道问题是什么以及我应该从哪里开始调试，因为它可以正常速度地单击图例上的鼠标。

我知道任何人在不查看源代码或工作 fiddle 的情况下都很难提供帮助，但我只是想知道(在我尝试在 fiddle 上重现问题之前)是否有人经历过类似的事情？鼠标点击速度会影响 D3 中元素的渲染方式吗？或者这根本不是 D3 问题，而是我忽略的一些 javascript/dom 问题？

Answer 1

根据您的转换设置方式，可能会出现一些“奇怪”的行为。例如，如果同一个元素附加了许多过渡，则当另一个元素开始时，一个过渡可能会被中断，这可能会导致某些元素无法在屏幕上重绘。

有关此内容的更多信息，请参阅 D3 documentation: Working with transitions ，具体来说this section这解释了“对于给定元素，转换是排他性的:该元素上只能同时运行一个转换。在该元素上启动新转换会停止任何已在运行的转换。”