die XY-Koordinaten in einem d3 Ziehereignis invertierende

Question

I eine Kraft Layout mit der folgenden Struktur:

<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 auch ein Schleppverhalten der rect verbunden, um es zu schleppen (Skalierung durch eine behandelt wird separater Schieberegler).

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

Es funktioniert meistens, aber es springt herum, während ich es schleppe. Ich ein Protokoll tat und sah, dass das d3.event Objekt zwischen relativen XY-Koordinaten und Unbedingten abwechselt, ist hier eine Probe von dem, was ich sehe:

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

Ich habe keine anderen Elemente sehen, das Verhalten an sie gebunden. Alle d3.event-Objekte haben die Eigenschaft 'drag' und dasselbe srcElement. Wie kann ich die Ereignisse zum Schweigen bringen, die die relativen Positionen zurückgeben?

Answer 1

das Problem gefunden, es ist der gleiche Fehler wie in d3.event.y has strange values during drag behavior

Drag Verhalten Umzug in die Gruppe es bis feste transformiert.