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 举个例子

还有另一个我无法弄清楚的故障，如果您将 window 大小更改得太快或有太多 objs（这样力会使它们疯狂反弹），最终它们中的一些会return NaN 在他们的 d.x 和 d.y 中打破他们的翻译转换。如果对此有任何想法，那就太好了。

提前致谢！

Answer 1

分离你的转换。添加另一个 <g> 元素，该元素将仅控制图块的位置和一个控制旋转的元素。

.例如

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

D3 v4：强制滴答与点击旋转和打破力量

D3 v4: force tick vs click to rotate and breaking the force

javascript

d3.js

click

drag

force-layout