javascript Internet Explorer 10 未显示 svg 路径（d3.js 图）

internet explorer 10 not showing svg path (d3.js graph)

提问by Letterman

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

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

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

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

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

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

回答by nickiaconis

Summary:

概括：

There is a bug in IEthat causes paths with markers to render improperly. The original code with markers removedrenders without problem.

IE中存在一个错误，导致带有标记的路径渲染不正确。删除标记的原始代码呈现没有问题。

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

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

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

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

---

---

Original post:

原帖：

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

不幸的是，我发现 James 的答案仅适用于静态 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:

我从原始示例中提取了 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 + ")"; });

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.)

这确实向<g>元素添加了指定的属性，但对“实时”图形的显示没有影响。（现在检查回来，我注意到在IE10的“静态”图显示的链接，即使没有所看到这些属性在这里。）

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.

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

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)

我能找到的唯一似乎相关的信息来源是这篇 SO 帖子：Element 不会出现在 IE7 中，直到我通过开发人员工具栏对其进行编辑
但是，我对 svg 还很陌生，所以我对如何将那里描述的修复移植到 svg（该修复是针对 html 元素的）

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. =\

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

---

---

Update:

更新：

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

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

This fiddleoffers 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 ignoredit. Please go to this poston Microsoft's issue tracker website and click the link indicating you can reproduce this bug. Maybe we can get their attention?

此错误已报告给 Microsoft，但到目前为止，他们似乎否认或忽略了它。请转到Microsoft 问题跟踪器网站上的这篇文章，然后单击指示您可以重现此错误的链接。也许我们可以引起他们的注意？

回答by talkol

The other marker questionhas an excellent answer by Christian Lund which worked for me very well.

在其他标记问题已经由基督教隆德这对我来说有效得非常好了绝佳的答案。

To save you the trouble of going there, here's the gist of things:

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

In my force animation, I have a tickfunction that looks like this:

在我的力动画中，我有一个如下所示的tick函数：

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

I also hold all of my graph links inside the linkvariable, defined like so:

我还将所有图形链接保存在link变量中，定义如下：

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

Now, to implement the magic suggested by Christian, I've added this line in the beginning of my tickfunction:

现在，为了实现 Christian 建议的魔法，我在tick函数的开头添加了这一行：

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

I left all of my markers intact. What this little piece of wonder does, is go over all the link nodes every tick of the animation, and re-add them to the DOM. This causes IE 10 to re-render them, and all is good with the world.

我把所有的标记都完好无损。这个小小的奇迹所做的就是在动画的每个滴答声中检查所有链接节点，并将它们重新添加到 DOM 中。这会导致 IE 10 重新渲染它们，并且一切都很好。

This seems to fix the IE 10 problems... of course it's recommended to add this patch only on IE 10

这似乎解决了 IE 10 的问题...当然建议仅在 IE 10 上添加此补丁

If this works for you don't forget to go to the other question and give Christian an upvote

如果这对您有用，请不要忘记转到另一个问题并给 Christian 点赞

回答by James Holderness

I'm not sure if this has been resolved already, but the graph looks almost identical to me in all the browsers I've compared. I don't have IE10, but it looks fine in IE9 and I tested a static copy of the graph on NetRenderer'sIE10 and that looked fine too.

我不确定这是否已经解决，但在我比较过的所有浏览器中，图表看起来几乎相同。我没有 IE10，但它在 IE9 中看起来不错，我在NetRenderer 的IE10上测试了图形的静态副本，看起来也不错。

The only difference I could see is that IE didn't show solid arrow heads for some of the links, and that could easily be resolved just by setting the fill styles for those marker types.

我能看到的唯一区别是 IE 没有为某些链接显示实心箭头，只需为这些标记类型设置填充样式就可以轻松解决这个问题。

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

UPDATE:

更新：

Looking at the images you've added, that's definitely not what I'm seeing in IE9 or NetRenderer's version of IE10. Have you tried on multiple computers? Is it perhaps something specific to your setup?

查看您添加的图像，这绝对不是我在 IE9 或 NetRenderer 版本的 IE10 中看到的。你在多台电脑上试过吗？它可能是特定于您的设置的东西吗？

It's difficult to make suggestions without being able to reproduce the problem, but one thing you might want to try, is setting the path properties directly in the SVG rather than via the CSS.

在无法重现问题的情况下很难提出建议，但您可能想尝试的一件事是直接在 SVG 中而不是通过 CSS 设置路径属性。

So on the first gelement you would have something like this:

所以在第一个g元素上你会有这样的东西：

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

Here's a codepen exampleusing a static version of the markup. And here's the fullpage urlif you want to test it in NetRenderer yourself.

这是使用标记的静态版本的codepen 示例。如果您想自己在 NetRenderer 中测试它，这里是整页 url。

Even if that's not an ideal solution, it would at least be helpful to know whether that makes any difference.

即使这不是一个理想的解决方案，知道这是否有任何区别至少会有所帮助。