D3 js快速点击鼠标时出现意外行为

时间:2016-06-13 21:30:50

标签: javascript jquery d3.js svg

我有一个使用D3的多线图,并且线条有节点来标记点。我还在x轴下方有图例,以便在用户点击它们时显示或隐藏每一行。与此example

类似

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

我甚至不知道问题是什么,我应该在哪里开始调试,因为它可以正常快速鼠标点击图例。

我知道任何人都很难在没有查看源代码或工作小提琴的情况下提供帮助,但我只是想知道(在我尝试重现小提琴问题之前)有没有人经历过这样的事情?鼠标点击速度会影响元素在D3中的呈现方式吗?或者这根本不是D3问题,我忽略了一些javascript / dom的东西?

1 个答案:

答案 0 :(得分:1)

根据转换的设置方式,可能会出现一些“奇怪”行为。例如,如果有多个转换附加到同一个元素,则当另一个元素启动时,可能会中断一个转换,这可能导致某些元素未在屏幕上重绘。

有关详细信息,请参阅D3 documentation: Working with transitions,特别是this section,它解释了“对于给定元素,转换是独占的:同时只能在元素上运行一个转换。开始一个新的元素上的转换会停止任何已经运行的转换。“