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?