javascript - 将 d3 个圆圈从中心圆圈移开 - 强制布局

Question

我正在研究 d3 来表示圆圈中的节点，当圆圈的大小发生变化时，它们周围的圆圈应该远离一个人的大小从重叠中改变。

考虑上面的红色圆圈，当它的大小改变时，其他的应该向绿色箭头的方向移动。我尝试了力模拟，但我无法实现它并添加了下面的代码，我不确定我做错了什么，有人可以帮忙吗？

https://jsfiddle.net/m6s8dk7o/29/

var w = 900,
  h = 500;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var color = d3.scaleOrdinal(d3.schemeCategory10)

var data = {
  name: "root",
  children: [{
    label: 'RED1',
    size: 20,
    color: 'red'
  },{
    label: 'RAD2',
    size: 20,
    color: '#c99700'
  }, {
    label: 'BIL3',
    size: 20,
    color: '#008ce6'
  }, {
    label: 'EEN4',
    size: 10,
    color: '#007377'
  }, {
    label: 'INO5',
    size: 40,
    color: '#b4975a'
  },{
    label: 'RAD6',
    size: 40,
    color: '#c99700'
  },{
    label: 'BIL7',
    size: 30,
    color: '#008ce6'
  },  {
    label: 'INO8',
    size: 30,
    color: '#b4975a'
  },{
    label: 'INO9',
    size: 40,
    color: '#b4975a'
  },{
    label: 'RAD10',
    size: 40,
    color: '#c99700'
  },{
    label: 'BIL11',
    size: 30,
    color: '#008ce6'
  },  {
    label: 'INO12',
    size: 30,
    color: '#b4975a'
  } ]
};

var add = function(){
	data.children[0].size = 80;
  render();
}
var reset = function(){
	data.children[0].size = 20;
  render();
}
var render = function(){

var simulation = d3.forceSimulation(data.children)
  .force("x", d3.forceX(w / 2))
  .force("y", d3.forceY(h / 2))
  .force("collide", d3.forceCollide(function(d) {
    return d.size + 20
  }))

  .stop();

for (var i = 0; i < 100; ++i) simulation.tick();
console.log(data)


      
let nodeLevel1 = svg.selectAll('circle')
                .data(data.children, (d) => {
                    // Attaching key for uniqueness
                    console.log(d)
                    return d.label;
                });
                
                nodeLevel1.exit().remove();
    let nodeLevel1Enter = nodeLevel1
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return d.x
      })
      .attr("cy", function(d) {
        return d.y
      })
      .attr("r", function(d) {
        return d.size
      })
      .style("fill", function(d) {
        return d.color;
      })
      
      nodeLevel1Enter = nodeLevel1Enter
                .merge(nodeLevel1)
                
      let level1CirclesUpdate = nodeLevel1Enter
               //.selectAll('circle')
                .attr("cx", function(d) {
        return d.x
      })
      .attr("cy", function(d) {
        return d.y
      })
      .attr("r", function(d) {
        return d.size
      })
      .style("fill", function(d) {
        return d.color;
      })
      
      
  }
  d3.select('#updatesize').on('click',function(){
		add();
  })
  d3.select('#resetsize').on('click',function(){
		reset();
  })
  render();

<script src="https://d3js.org/d3.v5.min.js"></script>
<a href='javascript:;' id='updatesize'>
Update red resource size
</a>  | 
<a href='javascript:;' id='resetsize'>
Reset red resource size
</a>

Answer 1

为了回答，代码在这里更新jsfiddle.net/gx8q6ybd/39