Javascript Internet Explorer 11中使用D3.js处理异常鼠标悬停

我正在开发一些svg动画，我需要检测mouseover/mouseout事件，以便更改元素的z索引（即svg中元素的顺序）。 我的代码与Chrome和Firefox完美配合，但IE11有一些问题。 特别是，IE11似乎在元素上悬停时检测到多个mouseover事件，而没有检测到下面的mouseout事件

您可以在中找到该问题的虚拟示例

你知道怎么解决这个问题吗

---

谢谢

显然，当您使用d3.selection时，它会丢失鼠标事件。见本帖-

---

我必须重新安排在d3中添加元素的方式以适应。

我的解决方案是在重新添加元素后将

mouseout

处理程序重新绑定到该元素：

...
  .on('mouseover', function(d) {
    d3.select(this)
      .moveToFront()
      .on('mouseout', function(d) { // only bind the mouseout handler here
        d3.select(this).moveToBack();
      })
    })
... 

全速前进。注意，要测试它，您需要转到，因为JSFIDLE不会加载到IE上

罪魁祸首是this.parentNode.appendChild（this），如的所述。重新追加元素会破坏IE在重新追加的元素和鼠标是否已进入该元素的状态之间的关联。重新绑定回调模拟进入退出状态

对于D3V4+用户，此问题适用于或，两者都将所选元素重新插入DOM

另一个类似的例子：

...
  .on('mouseover', function(d) {
    d3.select(this)
      .moveToFront()
      .on('mouseout', function(d) { // only bind the mouseout handler here
        d3.select(this).moveToBack();
      })
    })
...