D3.js内のノードと他のsvg要素との間の衝突を設定する方法

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()内のノードの位置を更新する際、あなたが境界の外に何かを置いていないことを確認するためのチェックを追加します。しかし、太さのない矩形ではなく、境界線を弧の太さにするために行う計算が少しあります。