强制布局节点旋转

Question

好的，首先看看这个小提琴。你应该看到形状像疯了一样来回旋转。

这就是正在发生的事情：

force.on("tick", function(e) {
  vis.selectAll("path")
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")"
              // this is the thing
              +"rotate(" + Math.random() * 50 + ")";
    });
});

在这种情况下，我每次都会将transform: rotate()更改为Math.random() * 50。

现在我想要的是一个平稳的旋转。不是这种混蛋的东西。

看这个可以更好地理解我的意思。将高度想象为旋转。灰色方框代表我现在拥有的，蓝色方框代表我想要的。

我尝试将'transition: all 1s ease' CSS应用于该元素，但它忽略了它，我显然做错了。那么，我如何使这个无限的来回旋转变得平滑，就像我在使用CSS3转换一样？

Answer 1

每次勾选时，您都会随机将旋转设置为0到50度之间。您需要保持当前旋转，计算偏移，然后将旋转设置为当前+偏移。

这里有一个更新的勾选功能：

force.on("tick", function(e) {
  vis.selectAll("path")
      .attr("transform", function(d) {
        if(!d.rotate) { 
            d.rotate = Math.random() * 50;
        } else {
            d.rotate = d.rotate + 1;
        }
        return "translate(" + d.x + "," + d.y + ")"
              +"rotate(" + d.rotate + ")";
    });
});

以下是更新后的工作示例：https://jsfiddle.net/1aLc7x4j/