D3 v4:强制滴答与单击旋转并破坏力

Question

我正在尝试在力布局中的 d3v4 可拖动节点上设置矩形，以便在单击时旋转并带有过渡，但 tick 函数似乎通过重置旋转属性或忽略过渡函数来干扰它。

这些是困扰我的部分：

//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(所以力使它们疯狂反弹(，最终其中一些会在他们的 d.x 和 d.y 中返回 NaN 并破坏他们的翻译转换。对此的任何想法也会很棒。

提前感谢！

Answer 1

分离转换。 添加另一个仅控制磁贴位置的<g>元素和一个控制旋转的元素。

.e.g

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