如何在節點和其他svg元素之間設置碰撞D3.js

Question

在我的例子中，我想要設置所有的圓不僅相互碰撞，還碰撞弧，我怎麼能這樣做，任何幫助非常感謝。

code here

var simulation = d3.forceSimulation(nodes) 
     .force('charge', d3.forceManyBody().strength(5)) 
     .force('x', d3.forceX().x((d) => { 
      return centerGroup[topicArrayList.indexOf(d.topic)][0] * 0.9 
     })) 
     .force('y', d3.forceY().y((d) => { 
      return centerGroup[topicArrayList.indexOf(d.topic)][1] * 0.9 
     })) 
     .force('collision', d3.forceCollide().radius((d) => { 
      return d.radius; 
     })) 
     .on('tick', ticked); 

    function ticked() { 
     var u = d3.select('svg g') 
      .selectAll('circle') 
      .data(nodes); 

     u.enter() 
      .append('circle') 
      .attr('r', function(d) { 
       return d.radius; 
      }) 
      .merge(u) 
      .attr('cx', function(d) { 
       return d.x; 
      }) 
      .attr('cy', function(d) { 
       return d.y; 
      }) 

     u.exit().remove(); 
    } 

Answer 1

你可以使用由Mike Bostock's Bounded Force Layout建議的伎倆：在更新節點.ticked()的位置時，增加一個檢查，以確保你沒有把東西邊界之外。但是，爲了使邊界成爲具有厚度的圓弧而不是沒有厚度的矩形，需要做一些數學工作。