d3 ghosting zoom pan ie

Question

Ok I have created a bare bones example of a ghosting issue using SVG path elements. It causes ghosting on IE 11, but works fine on chrome/firefox as per. Unfortunately our clients like to use IE.

I am setting up a panning/zooming/dragging D3 graph v4 that has nodes and paths linking them. This is full screen, and resizes when the window is resized.

The example is here:

https://jsfiddle.net/sotian/xynya8q9/embedded/result/

I'm assuming it is being caused by the:

window.addEventListener("resize", function () { redraw(); simulation.alphaTarget(0.3).restart(); });

That calls the redraw method:

function redraw() {

    // Extract the width and height that was computed by CSS.
    width = chartDiv.clientWidth;
    height = chartDiv.clientHeight;

    // Use the extracted size to set the size of an SVG element.
    svg.attr("width", width).attr("height", height);

    // Resize the zoom panel
    zoomRect.attr("width", width).attr("height", height);

    if (true) {
        // reset simulation centre
        simulation.force("center", d3.forceCenter(width / 2, height / 2));
    }
}

To reproduce the issue, ensure the window is not maximised, and then resize the window, it leaves ghosting of the paths. I also get this effect in other scenarios I have not included in the example.

Is there a way to force a redraw on the svg element to clear these out?

I can't figure out what could be going wrong.

Thanks, Jon

Answer 1

The undefined "marker-end" links are screwing IE up. Remove this line:

.attr("marker-end", function (d) { return "url(#" + d.label + ")"; });

on your link definition.

Updated fiddle .