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>

我還具有與rect關聯的拖動行為，以將其四處拖動（縮放通過單獨的滑塊處理）。

        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坐標和絕對XY坐標之間交替，這是我所看到的示例：

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

我看不到其他任何綁定有行為​​的元素。 所有d3.event對象均具有'drag'類型屬性和相同的srcElement。 如何使返回相對位置的事件靜音？

Answer 1

發現了問題，它與d3.event.y中的錯誤相同， 在拖動行為期間具有奇怪的值

將拖動行為移至變換組可將其正確固定。