Edges (polylines with markers) do not move with transitions in IE10 and IE11

[daniel-a-h]

Markers do not update their Position when the graph changes in IE10+. To reproduce go to the Interactive Demo http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html

Start with the graph like this: digraph { A; B; A -> B; }

then just add the a line like this: digraph { A; B; A -> B; A -> C; }

The nodes position just fine, the edges however do not. This is not really the fault of dagre or d3 since it seems to be a bug in IE: https://connect.microsoft.com/IE/feedback/details/781964/svg-marker-is-not-updated-when-the-svg-element-is-moved-using-the-dom

However, I am in desperate need of a workaround and hoping someone here is able to solve this issue. Is it possible to disable the smooth transition to fix this? If so, how can I do that? Thanks.

[cpettitt]

Transitions are disabled by default, but it may be enabled in your code. If it is, it would look something like this:

      // Custom transition function
      function transition(selection) {
        return selection.transition().duration(500);
      }

      renderer.transition(transition);

This might not be enough though, since we set the edges pre-render but then position them post-render. If it doesn't work, we could try removing the marker before repositioning and adding it back. That's a little more involved though, so let me know if the above doesn't get you going.

[daniel-a-h]

I had tried to remove this custom Transition function and just verified by modifying the demo. The behaviour stays the same without custom transitions.

I think the way you're suggesting would be the solution. I tried the example above again, and the edge that gets added later (in the example the edge A -> C ) has the correct position. If we'd remove A -> B and add it back the same way A->C gets added it might work.