D3.js 强制布局节点旋转

好的，首先-。 你应该看到形状像疯了一样来回旋转

这就是正在发生的事情：

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

在这种情况下，我每次都会将

变换：rotate（）

更改为

Math.random（）*50

现在我想要的是一个平滑的旋转。不是这种干的东西

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

我尝试将

'transition:all 1s ease'

CSS应用于该元素，但它只是忽略了它，显然我做得不对。

---

那么，我如何使这个无限的来回旋转变得平滑，就像我使用CSS3转换一样？

每次勾选时，您都会随机将旋转设置为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 + ")";
    });
});

---

以下是更新后的工作示例：

Ok这里有另一个例子来说明我现在拥有什么（灰色框），以及我想要实现什么（蓝色框）。假设长方体的高度是旋转。你让我意识到，除非我使用类似于生成值的东西，否则我无法通过在每个刻度上设置随机旋转来实现这一点。我认为我们需要备份。你到底想在这里完成什么？旋转在可视化中代表什么？我怀疑在您的案例中，勾号回调是管理旋转转换的错误位置，但如果不了解您的最终目标，很难说。您可以在D3中应用转换：