如何围绕焦点旋转 d3.js 节点

How to rotate d3.js nodes around a foci?

本文关键字：js 节点 d3 旋转 何围绕 焦点      更新时间：2023-09-26

我一直在使用力布局作为我正在制作的棋盘游戏的物理引擎，它运行得很好。但是，我一直在试图弄清楚是否可以围绕特定焦点旋转节点。考虑一下这个代码笔。我想让代码笔中的 3 个绿色节点以均匀的方式围绕焦点旋转。在tick（）函数中，我执行以下操作：

var k = .1 * e.alpha;
// Push nodes toward their designated focus.
nodes.forEach(function(o, i) {
  o.y += (foci[o.id].y - o.y) * k;
  o.x += (foci[o.id].x - o.x) * k;
});

就像我将节点推向焦点一样，我想让指定到焦点的所有节点围绕该焦点旋转。有没有办法通过在 tick（） 函数中操作 o.y 和o.x变量来实现这一点？我尝试使用此公式手动设置 x 和 y 值，但我认为力布局的电荷和重力可能将其搞砸了。有什么想法吗？

我知道我正在使用力布局来做一些它不太打算做的事情，但任何帮助将不胜感激。

我已经弄乱了你的代码，以获得围绕一个点的基本运动。

我将焦点变量更改为一个只有两点的对象：

 foci = {
    x: 300,
    y: 100
  };

我添加到数据中，你必须给每个节点一个起点： 

nodes.push({
  id: 0,
  x:20,
  y:30
});
nodes.push({
  id: 0,
  x:40,
  y:60
});
nodes.push({
  id: 0,
  x:80,
  y:10
});

我为每个节点添加了一个角度，以便您以后可以独立使用它们：

 .attr("cx", function(d) {
            d.angle = 0; //added
      return d.x;
    })

并更改了刻度，使每个节点围绕焦点移动。如前所述，我添加了一个角度，因为这些点将以不同的半径围绕不同的圆移动，因为它们与焦点点的距离不同。如果您使用一个角度，那么所有节点都将彼此重叠，这是没有意义的：

圆上的点公式： 

//c = centre point, r = radius, a = angle
x = cx + r * cos(a)
y = cy + r * sin(a)

在勾号中使用它：

var radius = 100; //made up radius
  node
    .attr("cx", function(d) {
       if(d.angle>(2*Math.PI)){ restart at full circle
         d.angle=0;
       }
    d.x = foci.x + radius *Math.cos(d.angle) //move x
      return d.x;
    })
    .attr("cy", function(d) {
    d.y = foci.y + radius *Math.sin(d.angle) //move y
      return d.y;
    });

更新的小提琴：https://jsfiddle.net/reko91/yg0rs4xc/7/

这应该很容易实现，从圆运动更改为椭圆运动:)）

再看这个，这只移动了一半。这是由于即时报价功能仅持续几秒钟。如果单击其中一个节点，它将继续围绕圆圈。如果你想让这种情况连续发生，你必须设置一个计时器函数，让它不停地绕着圆圈运行，但这应该很容易实现。

而不是tick函数，只需在内部创建另一个带有计时器的函数，在加载时调用它，它将连续运行:)

相关文章：