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>