IE11 connector anchoring issue

[katquinto]

The anchoring of arrows when you drag does not work on IE10 and IE11

[Calvinv99]

Hi Katquinto, this might help solve the issue. Add this statement inside the tick(e) function: graph.line .attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .each(function (d) {

                //Solved the IE compatibility Issue
                this.parentNode.insertBefore(this, this);

Credits to http://stackoverflow.com/questions/15588478/internet-explorer-10-not-showing-svg-path-d3-js-graph

[nylen]

@Calvinv99 wrap your code snippets in three backquotes like this:

// put code here

@katquinto if I set up a test version with this change, can you confirm that it works?

[Calvinv99]

function tick(e) {
    graph.numTicks++;
    for (var name in graph.data) {
        var obj = graph.data[name];
            obj.positionConstraints.forEach(function(c) {

                var w = c.weight * e.alpha;
                if (!isNaN(c.x)) {
                    obj.x = (c.x * w + obj.x * (1 - w));
                }
                if (!isNaN(c.y)) {
                    obj.y = (c.y * w + obj.y * (1 - w));
                }

            });
    }

    if (graph.preventCollisions) {
        preventCollisions();
    }

    graph.line
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .each(function (d) {

            //Solved the IE compatibility Issue
            this.parentNode.insertBefore(this, this);

            var x    = d.target.x,
                y    = d.target.y,
                line = new geo.LineSegment(d.source.x, d.source.y, x, y);

            for (var e in d.target.edge) {
                var ix = line.intersect(d.target.edge[e].offset(x, y));
                if (ix.in1 && ix.in2) {
                    x = ix.x;
                    y = ix.y;
                    break;
                }
            }

            d3.select(this)
                .attr('x2', x)
                .attr('y2', y);
        });

    graph.node
        .attr('transform', function(d) {
            return 'translate(' + d.x + ',' + d.y + ')';
        });
}

It works on my side. Hope it helps.

[nylen]

@Calvinv99 the only thing is, there's no reason to do that unless we know we're running IE. According to this link it's not possible to detect IE 10+ using conditional comments, so it looks like we are back to the bad old ways of userAgent detection using jQuery.browser. (Congrats to Microsoft for taking out the feature that lets you seamlessly work around bugs, while not actually fixing all the bugs).

Rant aside, I'm working on a PR now. Thanks for your research on this issue.

[nylen]

See #9, I've put up a test version with this change and ideally I'd like confirmation that this fixes the issue in both IE 10 and 11 before I merge it.