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中並打破它們的轉換轉換。對此的任何想法都會很棒。

在此先感謝！

Answer 1

分開你的變換。 添加另一個<g>元素，該元素將僅控制切片的位置，並控制切片的位置。

.e.g

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