使用 d3 拖动 SVG <g> 元素会导致闪烁问题

Question

我一直在尝试使用 d3 库通过使用 transform translate 来拖放 dvg 元素。我可以拖动一个元素，但拖动时它会闪烁。

到目前为止，我一直在从下面的链接中搜索并进行反复试验，但这对我没有帮助。

"Stuttering" drag when using d3.behavior.drag() and transform

D3.js: Dragging everything in group ('g') by element contained in the group using origin() function

How to drag an svg group using d3.js drag behavior?

对于最后一个链接，我想我无法理解导致此问题的此要求的 svg 结构的必要性。有人可以帮我吗？

Answer 1

为此，使用d3.event 而不是d3.mouse 更容易。这是带有.data()的d3风格方法：

1. 读出源 svg 中 <g> 的 translate 属性。
2. 将translate 的x 和y 值添加到d3 对象的data。
3. 在拖动事件期间调整<g> 的data 和translate。

function bindDragging() {

    // Define d3 object
    var g = d3.select("#group");

    // Get translate (from: https://stackoverflow.com/a/38230545/3620572)
    var elem = document.createElementNS("http://www.w3.org/2000/svg", "g");
    elem.setAttributeNS(null, "transform", g.attr("transform"));
    var matrix = elem.transform.baseVal.consolidate().matrix;
    var x = matrix.e;
    var y = matrix.f;

    g.data([{
        // Position of the group
        x: x,
        y: y
        }])
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragend)
        );

    function dragstarted(d) {
        g.selectAll("rect").classed("active", true);
    }

    function dragged(d) {
        // Set the new position
        d.x += d3.event.dx;
        d.y += d3.event.dy;
        d3.select(this).attr("transform", function (d) {
            return "translate(" + [d.x, d.y] + ")"
        });

    }

    function dragend(d) {
        g.selectAll("rect").classed("active", false);
    }
}
bindDragging();

#group {
    stroke-width: 3;
    stroke: #808080;
    cursor: -webkit-grab;
    cursor: grab;
}

.active {
    stroke: #ff0000;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

<div class="svgContainer">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 776.63 680.09">
    <g id="group" transform="translate(0, 0)">
        <rect width="100" height="50" style="fill:rgb(40, 40, 109);" />
        <rect width="100" height="50" y="50" style="fill:rgb(63, 149, 75);" />
    </g>
</svg>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>