如何在焦點周圍旋轉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函數只能持續幾秒鐘。如果您單擊其中一個節點，它將繼續繞着該圓圈。如果你希望這種情況持續發生，你必須設置一個定時器函數，以便它能夠在圓周附近運行，但這應該很容易實現。

相反蜱功能只是做與計時器另一個函數裏面，稱之爲負載，它會持續運行:)