D3 v4：力の目盛りをクリックして力を回転させて壊します

Question

力のレイアウトでd3v4のドラッグ可能なノードに長方形を入れようとしていますが、トランジションでクリックして回転するようにしていますが、回転属性または遷移関数を無視します。

これらのトラブル私のことをビットです：

//CLICK 
function clicked(d, i) { 
    d.ang = d.ang+180 
    d3.select(this) 
     .transition() 
     .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")" 
     }); 
} 

//FORCE 
function ticked() { 
    d.ang += 360 
    var tiles = box.selectAll('.tile') 
     .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ") rotate(" + d.ang + ")" 
     }); 
} 

そして、ここで bin 例

とは、あなたが変更した場合、私は把握することはできません別のグリッチは、もありますウィンドウサイズが速すぎるかobjsが多すぎるので（その結果、強制的にバウンスしてしまいます）、結局いくつかのNaNがdxとdyにNaNを返して翻訳変換を破ります。それについての考えもすばらしいでしょう。

ありがとうございます！

Answer 1

変換を区切ります。 別の<g>タイルの位置のみを制御する要素と回転を制御する要素を追加します。素晴らしいことだ

.e.g

<g class="controls-location"> 
    <g class="controls-rotation"> 
     <rect> 
     <circle> 
    </g> 
</g>