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（以便强力使它们反弹），最终其中一些会在他们的dx中返回NaN dy并打破他们的翻译转型。对此的任何想法都会很棒。

提前致谢！

Answer 1

分开你的变形。添加另一个<g>元素，该元素仅控制图块的位置，另一个控制图块的旋转。

.e.g

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

D3 v4：强制勾选vs点击旋转并打破力量

1 个答案: