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 + ")"
        });
}

這是一個帶有示例的垃圾桶

還有一個我無法弄清楚的小故障，如果您將窗口大小更改得太快或有太多的obj（以至於使它們瘋狂反彈），最終其中一些將在其dx和dy中返回NaN並中斷。他們的翻譯轉換。 關於此的任何想法也將很棒。

提前致謝！

Answer 1

分開變換。 添加另一個僅控制圖塊位置的<g>元素和一個控制旋轉的元素。

。例如

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