互联网浏览器10不显示svg路径（d3.js图） [英] internet explorer 10 not showing svg path (d3.js graph)

问题描述

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

有什么我可以做的代码，即使使用Internet Explorer也能看到？

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

解决方案

摘要：

a href =https://connect.microsoft.com/IE/feedback/details/781964/>在IE 中的错误，导致带有标记的路径不正确地呈现。原始代码删除标记无任何问题。

有三种解决方案：

1. 不要使用标记


2. this： http://jsfiddle.net/niaconis/3YsWY/9/


3. 等待Microsoft修复此错误

选项2虽然有些丑陋，但可能是最可行的。

---

原始讯息：

've found James'的回答只适用于静态svg。

我把css和javascript从原来的例子中拉出来，放在jsfiddle中。链接在Chrome 26中正确显示（这是我的控制测试），但没有在IE 10中显示（如预期）。然后根据James给出的答案编辑了处理链接创建的javascript：

  var path = svg.append （svg：g）
 .attr（fill，function（d）{returnnone;}）/ * new * / 
 .attr d）{return1.5px;}）/ * new * / 
 .attr（stroke，function（d）{return＃666;}）/ * new * / 
。 selectAll（path）
 .data（force.links（））
 .enter（）。append（svg：path）
 .attr（class，function ）{returnlink+ d.type;}）
 .attr（marker-end，function（d）{returnurl（＃+ d.type +） 
  

这会将指定的属性添加到< g> 元素，但对live图形的显示没有影响。 （现在检查一下，我注意到静态图表显示IE10中的链接，即使没有这些属性，此处也是如此。 ）

我能够在IE10中显示链接（甚至直接在原始示例）。我在DOM中找到了< path> 标签之一，然后在样式选项卡中取消选中，并重新选中path.link样式。

这会获得显示的链接，但是任何后续与图形的交互都会从链接的末端断开标记。

我发现唯一的信息来源似乎相关的是这个SO发布：元素不会显示在IE7，直到我通过开发工具栏编辑它

然而，我是相当新的svg，所以我没有丝毫的想法如何移植到svg描述的修复对于html元素）

也许这将有助于人们朝正确的方向前进？

我知道这不完全是一个答案，我会把这个作为回答詹姆斯的答复，但似乎我没有足够的声誉这样做。 = \

---

更新：

事实证明，这个问题完全与标记有关。 这个小提琴是原始代码，但标记已删除，链接显示正常。标记问题已在之前记录，是IE10的一个严重bug。为什么它也会导致链接消失，我不知道。

这个小提琴提供了一个解决方法。这不是最干净的解决方案，因为我直接在链接的路径编码每个标记，但它的工作原理。

如果任何人都可以找到一个解决方法的标记问题本身，这将是更好的，它应该另外发布为一个答案其他标记问题。

（另请注意：我的解决方案使虚线链接看起来很糟糕， ）

这个错误已经报告给Microsoft，但到目前为止，他们似乎有拒绝或忽略它。请访问Microsoft问题跟踪器网站上的此帖，然后点击链接，指示您可以重现此错误。也许我们可以得到他们的注意？

If I open this graph for example: http://bl.ocks.org/mbostock/1153292 in IE10, i just can't see the links between the nodes.

Is there anything I can do in the code to make it possible to see even with Internet Explorer?

It seems IE just ignore some pieces of the svg... I couldn't find any way to make it visible.

解决方案

Summary:

There is a bug in IE that causes paths with markers to render improperly. The original code with markers removed renders without problem.

There are three solutions:

1. Don't use markers
2. Embed the markers in the path like this: http://jsfiddle.net/niaconis/3YsWY/9/
3. Wait for Microsoft to fix this bug

Option 2, though a little ugly, is probably the most viable.

---

Original post:

Unfortunately, I've found James' answer only works for the static svg.

I pulled the css and javascript from the original example and placed them in jsfiddle. The links displayed correctly in Chrome 26 (this was my sort of control test), but didn't display at all in IE 10 (as expected). I then edited the javascript which dealt with the creation of the links according to the answer James gave:

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 + ")"; });

This did add the specified attributes to the <g> element, but had no effect on the display of the "live" graph. (Checking back now, I've noticed the "static" graph displays links in IE10 even without these attributes as seen here.)

I was able to make the links visible in IE10 (even directly in the original example) by using IE's developer toolbar. I found one of the <path> tags in the DOM, then in the Style tab to the right unchecked and rechecked the "path.link" style.

This gets the links to show, but any subsequent interaction with the graph disconnects the markers from the ends of the links. They simply stay in place, and I've found nothing that will get them to re-attach.

The only source of information I can find that seems relevant is this SO post: Element doesn't appear in IE7 until I edit it through Developer Toolbar
However, I'm fairly new to svg, so I haven't the slightest idea how to port the fix described there to svg (that fix was for an html element)

Maybe this will help someone get headed in the right direction?

P.S. I know this isn't exactly an answer, and I would have just posted this as a reply to James' answer, but it seems I don't have enough reputation to do that. =\

---

Update:

As it turns out, this issue is related entirely to markers. This fiddle is the original code but with markers removed, and the links show up just fine. The marker issue has been documented before and is a serious bug of IE10. Why it also causes the links to disappear, I don't know.

This fiddle offers a work-around. It's not the cleanest solution as I've encoded each marker directly in its link's path, but it works.

If anyone can find a work-around for the marker issue itself, that would be better, and it should additionally be posted as an answer to the other marker question.

(Also note: My solution makes dashed links look terrible, so I've made them light blue instead.)

This bug has been reported to Microsoft, but so far they seem to have denied or ignored it. Please go to this post on Microsoft's issue tracker website and click the link indicating you can reproduce this bug. Maybe we can get their attention?

这篇关于互联网浏览器10不显示svg路径（d3.js图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！