Javascript D3 js快速鼠标点击时的意外行为

我有一个使用D3的多行图表，这些线有节点来标记点。我在x轴下也有图例，当用户单击它们时，可以显示或隐藏每一行。与此类似

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

我甚至不知道问题是什么，我应该从哪里开始调试，因为它可以正常使用鼠标点击图例

我知道任何人都很难不看源代码或一把小提琴就能帮上忙，但我只是想知道（在我尝试在小提琴上重现问题之前）以前有没有人经历过类似的事情？鼠标点击速度会影响D3中元素的渲染方式吗？或者这根本不是D3问题，我忽略了一些javascript/dom问题

一些“奇怪”的行为可能会发生，具体取决于过渡的设置方式。例如，如果有许多转换附加到同一个元素，则当另一个转换启动时，其中一个转换可能会被中断，这可能导致某些元素在屏幕上没有被重新绘制

---

有关这方面的更多信息，请参见，其中特别解释了“对于给定元素，转换是独占的：同一时间只能在元素上运行一个转换。在元素上启动新转换将停止任何已在运行的转换。”

否，单击速度不应影响D3中渲染元素的方式。有些根据转换的设置方式，可能会出现“奇怪”行为。例如，如果有许多转换连接到同一个元素，则当另一个转换启动时，其中一个转换可能会被中断，这可能导致某些元素在屏幕上未被重绘（有关此操作的更多信息，请参阅）对于给定元素，转换是独占的：同一时间只能在该元素上运行一个转换。在该元素上启动新转换将停止任何已在运行的转换。“）我相信这可能就是原因。我在图例单击时将该行的

isVisible

属性设置为

true/false

，然后再次重新绘制图表。这会被视为过渡吗？@helderdarocha你是对的。我将图例移到父

svg>g

元素之外，在那里我处理所有鼠标事件和过渡用于缩放、工具提示等，并为他们创建了一个单独的组

g

。这修复了“意外行为”，如果您可以添加注释作为答案，我将接受。感谢您的帮助。