强制布局节点轮换

时间:2015-06-27 12:31:39

标签: d3.js rotation force-layout

好的,首先 - 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过渡一样?

1 个答案:

答案 0 :(得分:2)

每个刻度线都会随机将旋转设置为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/