如何围绕一个焦点旋转d3.js节点？
我一直使用力布局作为一种身体的引擎，我正在制作的棋盘游戏，它一直工作得很好。然而，我一直在试图找出是否有可能围绕一个特定的焦点旋转节点。考虑一下这个码页。我想使代码页中的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;
});就像我把节点推到一个焦点上一样，我想让指定给一个焦点的所有节点都围绕着这个焦点旋转。有任何方法可以通过操纵o.y ()函数中的o.x变量来实现这一点吗？我试着用这个公式手动设置x和y值，但是我认为力布局的电荷和重力可能把它搞砸了。有什么想法吗？
我知道我正在使用的部队布局，这是不太打算做的事情，但任何帮助都将不胜感激。
回答 1
Stack Overflow用户
发布于 2016-02-27 13:05:26
我把你的代码搞得乱七八糟，以便在一个点上有一个基本的动作。
我将foci 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;
})并改变了滴答，使每个节点围绕焦点移动。如前所述，我增加了一个角度，因为这些点将围绕不同大小半径的不同圆圈移动，因为它们与焦点点的距离不同。如果使用一个角度，那么所有节点都会在彼此的顶部移动，这是没有意义的：
圆上点的公式：
//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/
这应该是很简单的实现，从圆圈运动到椭圆：)
再看一遍，这只会在一半左右移动。这是由于滴答功能只持续了几秒钟。如果您单击其中一个节点，它将在圆周继续运行。如果您希望这种情况持续发生，您必须设置一个计时器函数，以便它不间断地绕着圆圈运行，但这应该很容易实现。
而不是刻度函数，只需在里面使用计时器进行另一个函数，在加载时调用它，它就会连续运行:)
https://stackoverflow.com/questions/35660550
复制相似问题
腾讯云开发者
