d3 拖动事件中的 XY 坐标正在反转

Question

我有一个具有以下结构的力布局：

<svg width="300" height="220">
    <g class="scaleWrapper" transform="scale(0.3)">
        <g class="transformWrapper" transform="translate(-110, -80)">
           <g class="backgroundWrapper">
               <rect class="backgroundRect" width="300" height="220"></rect>
           </g>
           <g class="forceNode"></g>
           <g class="forceNode"></g>
           <g class="forceLink"></g>
        </g>
    </g>
</svg>

我还有一个链接到矩形的拖动行为来拖动它（通过单独的滑块处理缩放）。

        let transformElement = d3.select('.transformWrapper');
        let svgBackground = transformElement.append('g')
            .classed('backgroundWrapper', true);

        function originFunction() {
            let d = d3.select('.transformWrapper');
            return {
                x: d.attr('x'),
                y: d.attr('y')
            };
        }

        let svgDrag = d3.behavior.drag()
            .origin(originFunction)
            .on('dragstart', function(){
                d3.event.sourceEvent.stopPropagation();
            })
            .on('drag', function(){
                transformElement.attr("transform", `translate(${d3.event.x}, ${d3.event.y})`);
            });

        svgBackground.call(svgDrag);

它主要是有效的，但是当我拖动它时它会跳来跳去。我做了一个日志，看到 d3.event 对象在相对 XY 坐标和绝对坐标之间交替，这是我所看到的示例：

-111 -80
-29 -6
-110 -80
-29 -5

我没有看到任何其他元素具有与其绑定的行为。所有 d3.event 对象都具有“拖动”类型属性和相同的 srcElement。如何使返回相对位置的事件静音？

Answer 1

找到问题了，和d3.event.y has strange values during drag behavior一样的bug

将拖动行为移动到变换组将其固定。