IE11上的D3节点和链接呈现问题

Question

我正在尝试使用D3创建流程图。它在Chrome上运行并呈现正常。但是在IE 11和Edge上，它导致渲染问题。

在Chrome上，如果我拖动第二个圆圈，箭头会随着圆圈和箭头一起移动。

在IE上，圆圈只会移动。

Fiddle Link Here

window.states[0].transitions.push( { label : 'waaa!', points : [ { x : 250, y : 30}], target : window.states[ 2]})

    window.svg = d3.select( 'body')
    .append("svg")
    .attr("width", "960px")
    .attr("height", "500px");

        // define arrow markers for graph links
    svg.append('svg:defs').append('svg:marker')
        .attr('id', 'end-arrow')
        .attr('viewBox', '0 -5 10 10')
        .attr('refX', 4)
        .attr('markerWidth', 8)
        .attr('markerHeight', 8)
        .attr('orient', 'auto')
        .append('svg:path')
        .attr('d', 'M0,-5L10,0L0,5')
        .attr('class', 'end-arrow')
    ;


        // line displayed when dragging new nodes
    var drag_line = svg.append('svg:path')
        .attr({
            'class' : 'dragline hidden',
            'd'     : 'M0,0L0,0'
        })
    ;

    var gTransitions = svg.append( 'g').selectAll( "path.transition");
    var gStates = svg.append("g").selectAll( "g.state");

    var transitions = function() {
        return states.reduce( function( initial, state) {
            return initial.concat( 
                state.transitions.map( function( transition) {
                    return { source : state, transition : transition};
                })
            );
        }, []);
    };

    var transformTransitionEndpoints = function( d, i) {
        var endPoints = d.endPoints();

        var point = [ 
            d.type=='start' ? endPoints[0].x : endPoints[1].x, 
            d.type=='start' ? endPoints[0].y : endPoints[1].y
        ];

        return "translate("+ point + ")";
    }