在IE11中D3和弦示例悬停问题

Question

我正在研究如何使用我在http://www.delimited.io/blog/2013/12/8/chord-diagrams-in-d3

找到的教程在D3中构建和弦图的一些示例

我正在看第一个关于头发颜色偏好的例子。当您将鼠标悬停在圆圈边缘的组上时，它仅显示与该组相关的和弦，当您再次将鼠标移到圆圈外时，所有其他和弦都会重新出现。

这似乎是通过动态地将css类“淡化”附加到应该隐藏的所有和弦来实现的，然后下面的CSS处理将它们全部隐藏在悬停中。

#circle:hover path.fade {
  display: none;
}

这在Chrome中运行良好，但是当我在IE11中尝试相同的页面时，一旦你在一个组上空盘旋，当你将鼠标移到圆圈外时，其余的和弦永远不会被重绘。

我在IE11中启动了调试器，似乎只是在调试器中修改DOM上的一个属性就可以解决问题 - 但是我无法弄清楚如何在代码中实现这一点。

我在这里创建了一个小提琴，其中包含所有细节https://jsfiddle.net/49dym52r/

感谢您的帮助。

Answer 1

我在Windows 10上查看Internet Explorer 11中的delimited.io resource时能够重现此问题。但是，我无法在Microsoft Edge中重现此问题，这可能意味着修复程序作为一部分进入在Trident的分支之后，在EdgeHTML上完成了额外的Web平台工作。

我们不太可能在Internet Explorer上进行任何功能工作，因此您最好的选择是说服Internet Explorer 11更恰当地运行。这有时候很棘手，但在Telerik's Fiddler中几分钟后，我能够在我的Windows 10版本中通过以下添加解决Internet Explorer 11中的问题：

div:hover { background: auto } // Or svg:hover, per the comments below

我将此添加到上述delimited.io资源的顶部，它似乎已经解决了我的问题。它有点笨拙，所以你可能想调整它的范围，如果你发现它会导致任何问题。