Rectangle 27 0

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


force.on("tick", function() {
  link.each(function() {this.parentNode.insertBefore(this, this); });
  ...
});
force.on("tick", function() {
  ...
});
tick
var link = svg.selectAll(".link").data(links).enter() ...

Great, works in IE 10 and IE11

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

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.

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

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

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

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

Note
Rectangle 27 0

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


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

@dan-bailiff Here's an example of putting square markers in the middle of straight lines. The formulas it uses should be a little easier to digest. Let me know if it helps you out.

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.

I don't currently have access to a system with IE10, and I can never get javascript to work with NetRenderer which is why I've been testing with static markup. But since the problem seems to be js related, based on your findings, that explains why I can't reproduce it. Unfortunately it also means I can't confirm your solution.

I don't know about the OP, but this was certainly useful for me. And with the amount of information you've provided, it's better as a separate answer anyway, because there's a limit to what you can put in the comments. +1

I happened to find a solution that works... somewhat. Take a look at this fiddle. It still has the disembodied marker issue, but the links are visible. (Also, to James, I'm glad the information will be useful. I didn't know there was a limit since I hadn't had the opportunity to comment before.)

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:

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.

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.

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

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

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

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)

There are three solutions:

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

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?

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

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.

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.

Note
Rectangle 27 0

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


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

@dan-bailiff Here's an example of putting square markers in the middle of straight lines. The formulas it uses should be a little easier to digest. Let me know if it helps you out.

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.

I don't currently have access to a system with IE10, and I can never get javascript to work with NetRenderer which is why I've been testing with static markup. But since the problem seems to be js related, based on your findings, that explains why I can't reproduce it. Unfortunately it also means I can't confirm your solution.

I don't know about the OP, but this was certainly useful for me. And with the amount of information you've provided, it's better as a separate answer anyway, because there's a limit to what you can put in the comments. +1

I happened to find a solution that works... somewhat. Take a look at this fiddle. It still has the disembodied marker issue, but the links are visible. (Also, to James, I'm glad the information will be useful. I didn't know there was a limit since I hadn't had the opportunity to comment before.)

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:

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.

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.

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

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

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

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)

There are three solutions:

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

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?

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

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.

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.

Note
Rectangle 27 0

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


<g fill="none" stroke-width="1.5px" stroke="#666">
marker#suit {
  fill: black;
}
marker#resolved {
  fill: black;
}

Here's a codepen example using a static version of the markup. And here's the fullpage url if you want to test it in NetRenderer yourself.

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's IE10 and that looked fine too.

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.

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?

So on the first g element you would have something like this:

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.

Note