javascript - 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 上的一个属性即可解决问题 - 但我无法弄清楚如何在代码中实现此目的。

我在这里创建了一个包含所有细节的 fiddle https://jsfiddle.net/49dym52r/

感谢您的帮助。

Answer 1

我在查看 delimited.io resource 时能够重现该问题在 Windows 10 上的 Internet Explorer 11 中。但是，我无法在 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 资源的顶部，它似乎已经为我解决了这个问题。它有点笨拙，因此如果您发现它给您带来任何问题，您可能需要调整它的范围。