强制布局节点旋转

Question

好的，首先 - look at this fiddle。你应该看到形状疯狂地来回旋转。

事情是这样的：

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。

现在我想要的是平滑的旋转。不是这种生涩的东西。

请参阅 this 以更好地理解我的意思。将高度想象成旋转。灰色框代表我现在拥有的，蓝色代表我想要的。

我尝试将 '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/

强制布局节点旋转

Force layout node rotation

rotation

d3.js

force-layout