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

Question

I have a force layout with the following structure:

<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>

I also have a drag behavior linked to the rect to drag it around (scaling is handled through a separate slider).

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

It mostly works, but it jumps around as i drag it. I did a log and saw that the d3.event object is alternating between relative XY coordinates and absolute ones, here's a sample of what I'm seeing:

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

I don't see any other elements that have behavior bound to them. All the d3.event objects have the 'drag' type property and the same srcElement. How can I silence the events that are returning the relative positions?

Answer 1

Found the problem, it's the same bug as in d3.event.y has strange values during drag behavior

Moving the drag behavior to the transform group fixed it right up.