D3 Chord示例IE11中的Hover问题

Question

我正在研究如何在D3中构造chord图的一些示例，这是我在http://www.delimited.io/blog/2013/12/8/chord-diagrams-in-d3上找到的教程中的一部分。

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

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

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

这在Chrome中很好，但是当我在IE11中尝试相同的页面时，一旦您在一个组上盘旋，当您将鼠标移出圆圈时，其余的和弦就不会被重新绘制。

我在IE11中启动了调试器，在调试器中简单地修改DOM上的一个属性似乎就解决了这个问题--但是我很难找到如何在代码中实现这个目标。

我在这里创建了一个小提琴，上面有https://jsfiddle.net/49dym52r/的所有细节

谢谢你的帮助。

Answer 1

在Windows 10上查看Internet 11中的delimited.io资源时，我能够重现这个问题。但是，我无法在Microsoft中重现该问题，这可能意味着在三叉戟的分叉之后，修补程序是在EdgeHTML上完成的附加web平台工作的一部分。

我们不太可能在Internet上做任何功能工作，所以你最好的选择就是说服Internet 11采取更恰当的行动。这有时是很棘手的，但是在使用Telerik's Fiddler几分钟之后，我能够在构建Windows 10时解决Internet 11中的问题，并添加了以下内容：

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

我将它添加到前面提到的delimited.io资源的顶部，它似乎解决了这个问题。它有点重，所以你可能想调整它的范围，如果你发现它引起你的任何问题。

​

​