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

Question

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.

Answer 1

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?

Answer 2

The other marker question has 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 tick function that looks like this:

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

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

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 tick function:

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.

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

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