如何在焦点周围旋转d3.js节点？

Question

我一直在使用强制布局作为我制作的棋盘游戏的一种物理引擎，并且它一直工作得很好。但是，我一直试图弄清楚是否有可能围绕特定的焦点旋转节点。考虑这个codepen。我想让codepen中的3个绿色节点以统一的方式围绕焦点旋转。在蜱（）函数，我做到以下几点：

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变量来完成此操作？我尝试过使用this formula手动设置x和y的值，但我认为可能是力布局的电荷和重力将它搞乱了。有任何想法吗？

我知道我使用强制布局的东西它不是打算做，但任何帮助将不胜感激。

Answer 1

我已经搞乱了你的代码，得到一个点的基本动作。

我改变了焦点VAR为对象这仅仅是两点：

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

并更改了刻度以便每个n颂歌在焦点附近移动。如前所述，我添加了一个角度，因为这些点将围绕具有不同大小半径的不同圆圈移动，因为它们距离焦点点的距离不同。如果你使用一个角度，那么所有的节点将移动ontop的对方是毫无意义的：

上一个圆点

公式：

//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函数只能持续几秒钟。如果您单击其中一个节点，它将继续绕着该圆圈。如果你希望这种情况持续发生，你必须设置一个定时器函数，以便它能够在圆周附近运行，但这应该很容易实现。

相反蜱功能只是做与计时器另一个函数里面，称之为负载，它会持续运行:)