は、私は、次の構造を有する力レイアウトを有する

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> 

Iはまた、それを周りにドラッグする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座標と絶対的なものとの間で交互にされていることを見て、ここで私が見ているもののサンプルです：

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

私は行動を持っている任意の他の要素が表示されませんそれらに結びついている。すべてのd3.eventオブジェクトは、 'ドラッグ'型のプロパティと同じsrcElementを持ちます。どのように私は相対的な位置を返すイベントを沈黙させることができますか？問題を発見

Answer 1

、それはすぐにそれを修正トランスフォーム・グループにドラッグ動作を移動d3.event.y has strange values during drag behavior

と同じバグです。