Internet浏览器10中未示出SVG路径（d3.js图）(internet explorer 1

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

有什么我可以在代码做，使之可以看到，即使与Internet Explorer？

看来IE忽略了SVG的一些碎片......我找不到任何方式使其可见。

Answer 1:

摘要：

有一个在IE浏览器漏洞，导致用彩笔路径不正确渲染。原代码与删除标记呈现没有问题。

有三种解决方案：

不要使用标记
嵌入标记在这样的路径： http://jsfiddle.net/niaconis/3YsWY/9/
等待微软修复这个bug

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

原帖：

不幸的是，我发现詹姆斯的回答只适用于静态SVG。

我把CSS和JavaScript从原来的例子，把他们安置在的jsfiddle。在Chrome 26正确显示的链接（这是我选控制测试的），但没有在IE 10在所有显示（如预期）。然后我编辑其中讨论了创建根据詹姆斯给出了答案的链接的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的“静态”图显示的链接，即使没有所看到这些属性在这里。）

我是能够使链接在IE10可见的（即使是在直接最初的例子）通过使用IE浏览器的开发者工具栏。我发现了一个<path>在DOM标签，然后在样式选项卡中的权利泛滥，复查了“path.link”的风格。

这得到的链接显示，但图中的任何后续的互动断开链接末端的标记。他们只是停留在原地，而我什么也没找到，这将让他们重新连接。

唯一的信息来源，我可以发现，似乎相关的是这样的SO职位：元素没有出现在IE7，直到我通过开发工具栏编辑
不过，我是相当新的SVG，所以我还没有修复有如何端口描述SVG丝毫的想法（即修复是一个HTML元素）

也许这将有助于在正确的方向有人得到向何处去？

PS我知道这是不完全的答案，我会刚刚发布此作为詹姆斯的回答答复，但似乎我没有足够的信誉来做到这一点。 = \

更新：

事实证明，这个问题完全是相关的标志物。这小提琴是原代码，但有标记删除，链接显示出来就好了。标记问题已前记录是IE10的一个严重的错误。为什么它也使链接消失，我不知道。

这拨弄提供了一个变通。这不是最干净的解决方案，因为我已经在其链接的路径直接编码每个标记，但它的作品。

如果任何人都可以找到一个变通的标记问题本身，这将是更好的，它应该还张贴作为一个答案，其他的标记问题。

（另请注意：我的解决方案，使虚链接看起来可怕，所以我让他们浅蓝色来代替。）

此错误已报告给微软，但到目前为止，他们似乎已经否认或忽略它。请到这个帖子在微软的问题跟踪网站，并点击链接，指示可以重现这个bug。也许我们可以得到他们的关注呢？

Answer 2:

在其他标记问题已经由基督教隆德这为我工作得非常好了绝佳的答案。

为了节省您去那里的麻烦，这里的事情的要点：

在我的力的动画，我有一个tick功能，看起来像这样：

force.on("tick", function() {
  ...
});

我还保存所有的在我的图表链接link变量，像这样定义的：

var link = svg.selectAll(".link").data(links).enter() ...

现在，为了实现由基督教提出的魔力，我已在我的开始这条线tick功能：

force.on("tick", function() {
  link.each(function() {this.parentNode.insertBefore(this, this); });
  ...
});

我离开了我所有的标志完好。这是什么小片神奇的呢，是动画的每一个节拍去了所有的链接节点，并把它们重新添加到DOM。这会导致IE 10重新呈现它们，一切都很好与世界同步。

这似乎解决了IE 10的问题...当然我们建议只在IE 10中添加这个补丁

如果这对你的作品，不要忘记去其他的问题，并给基督徒的给予好评

Answer 3:

我不知道这是否已经被解决，但图形看起来我比较了所有的浏览器几乎等同于我。我没有IE10，但在IE9看起来不错，我测试了在图形上的静态副本NetRenderer的 IE10和看起来也没关系。

我能看到的唯一区别是，IE浏览器没有显示实心箭头头的一些环节，这样很容易仅仅通过设置填充样式的标记类型来解决。

marker#suit {
  fill: black;
}
marker#resolved {
  fill: black;
}

更新：

看着你已经添加了图片，这绝对不是我所看到的在IE9或NetRenderer版的IE10的。您是否尝试过在多台计算机？它是也许一些特定于您的设置？

这是很难做出建议，而不能重现该问题，但有一点你可能会想尝试，在SVG而不是通过CSS直接设置路径属性。

因此，第一个上g元素你有这样的事情：

<g fill="none" stroke-width="1.5px" stroke="#666">

这里有一个codepen例如使用标记的静态版本。而这里的全页URL ，如果你想测试它在NetRenderer自己。

即使这不是一个理想的解决方案，这将至少是有益的知道是否有什么差别。

文章来源: internet explorer 10 not showing svg path (d3.js graph)