Question

好的我已经创建了一个使用SVG路径元素的重影问题的简单例子。它会导致IE 11出现重影，但在chrome / firefox上工作正常。不幸的是，我们的客户喜欢使用IE浏览器。

我正在设置一个平移/缩放/拖动D3图形v4，它包含链接它们的节点和路径。这是全屏，并在调整窗口大小时调整大小。

示例如下：

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

我认为它是由以下原因引起的：

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

调用重绘方法：

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

要重现此问题，请确保窗口未最大化，然后调整窗口大小，这会留下路径的重影。我也在我未包含在示例中的其他场景中获得此效果。

有没有办法强制重新绘制svg元素以清除它们？

我无法弄清楚可能出现的问题。

谢谢，乔恩

Answer 1

未定义的“marker-end”链接正在搞砸IE。删除这一行：

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

链接定义。

更新了fiddle。

d3鬼影缩放平移即

1 个答案: