javascript - Internet Explorer 10 不显示 svg 路径(d3.js 图)

Question

如果我打开这个图表，例如:http://bl.ocks.org/mbostock/1153292在 IE10 中，我只是看不到节点之间的链接。

我可以在代码中做些什么来使其即使使用 Internet Explorer 也能看到吗？

似乎 IE 只是忽略了 svg 的某些部分...我找不到任何方法使其可见。

Answer 1

摘要:

有一个bug in IE这会导致带有标记的路径渲染不正确。原码with markers removed渲染没有问题。

解决办法有3种:

1. 不要使用标记
2. 将标记嵌入路径中，如下所示:http://jsfiddle.net/niaconis/3YsWY/9/
3. 等待 Microsoft 修复此错误

选项 2 虽然有点难看，但可能是最可行的。

<小时/>

原帖:

不幸的是，我发现 James 的答案仅适用于静态 svg。

我从原始示例中提取了 css 和 javascript，并将它们放在 jsfiddle 中。链接在 Chrome 26 中正确显示(这是我的控制测试)，但在 IE 10 中根本不显示(如预期)。然后，我根据 James 给出的答案编辑了处理链接创建的 javascript:

var path = svg.append("svg:g")
    .attr("fill", function(d) { return "none"; }) /*new*/
    .attr("stroke-width", function(d) { return "1.5px"; }) /*new*/
    .attr("stroke", function(d) { return "#666"; }) /*new*/
    .selectAll("path")
    .data(force.links())
    .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

这确实将指定的属性添加到 <g>元素，但对“实时”图表的显示没有影响。 (现在回头看，我注意到即使没有这些属性，“静态”图表也会在 IE10 中显示链接，如 here 所示。)

通过使用 IE 的开发人员工具栏，我能够使链接在 IE10 中可见(甚至直接在 original example 中)。我找到了其中之一 <path> DOM 中的标记，然后在右侧的“样式”选项卡中取消选中并重新选中“path.link”样式。

这会显示链接，但与图表的任何后续交互都会断开标记与链接末端的连接。它们只是停留在原地，我没有发现任何东西可以让它们重新附着。

我能找到的唯一似乎相关的信息来源是这个帖子:Element doesn't appear in IE7 until I edit it through Developer Toolbar
然而，我对 svg 还很陌生，所以我一点也不知道如何将那里描述的修复移植到 svg(该修复是针对 html 元素的)

也许这会帮助某人朝着正确的方向前进？

附注我知道这不完全是一个答案，我本想将其发布为对詹姆斯答案的回复，但似乎我没有足够的声誉来做到这一点。 =\

<小时/>

更新:

事实证明，这个问题完全与标记有关。 This fiddle是原始代码，但删除了标记，并且链接显示得很好。标记问题已 documented before是IE10的一个严重bug。为什么它也会导致链接消失，我不知道。

This fiddle提供了一种解决方法。这不是最干净的解决方案，因为我直接在其链接路径中对每个标记进行编码，但它有效。

如果任何人都可以找到标记问题本身的解决方法，那就更好了，并且它还应该作为 other marker question 的答案发布。 .

(另请注意:我的解决方案使虚线链接看起来很糟糕，因此我将它们改为浅蓝色。)

这个错误已经报告给微软，但到目前为止他们似乎已经denied or ignored它。请前往this post在 Microsoft 的问题跟踪器网站上，单击指示您可以重现此错误的链接。也许我们可以引起他们的注意？