Отодвиньте d3 круга от центрального круга — принудительное расположение

Я работаю над 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>


person Navin Leon    schedule 06.06.2018    source источник
comment
Я не понимаю ваш вопрос: ни один круг не перекрывается, collide обновляется с правильными радиусами.   -  person Gerardo Furtado    schedule 06.06.2018
comment
@GerardoFurtado да, круги не перекрываются, но когда размер круга увеличивается, другие круги вокруг них не перемещаются в той же степени. В приведенном выше примере круги перемещаются в разной степени, когда размер красного круга увеличивается.   -  person Navin Leon    schedule 06.06.2018
comment
Что такое различные степени? Сила просто перемещает их в соответствии с d.size + 20, как вы указали в коде.   -  person Gerardo Furtado    schedule 06.06.2018
comment
@GerardoFurtado, когда размер среднего круга увеличивается, другие круги случайным образом размещаются вокруг этого круга, положение других кругов перескакивает из одной точки в другую, что трудно отследить, когда кругов много. Круги уходят по прямой линии от центральной точки.   -  person Navin Leon    schedule 06.06.2018
comment
Они снова размещаются случайным образом по очень простой причине: вы каждый раз создаете новую симуляцию. Просто измените существующую симуляцию, не создавайте новую.   -  person Gerardo Furtado    schedule 06.06.2018
comment
@GerardoFurtado спасибо за помощь, простой пример кода поможет :)   -  person Navin Leon    schedule 06.06.2018
comment
Давайте продолжим обсуждение в чате.   -  person Navin Leon    schedule 06.06.2018
comment
Извините, у меня нет свободного времени для общения. Именно это я имел в виду, используя ту же симуляцию: jsfiddle.net/gx8q6ybd. Это просто для того, чтобы вы поняли идею.   -  person Gerardo Furtado    schedule 06.06.2018
comment
@GerardoFurtado это идеально! и спасибо за ваше драгоценное время. Я обновил код переходом jsfiddle.net/gx8q6ybd/8. Однако, когда я нажимаю «Сброс», другие круги не возвращаются в прежнее положение. Есть идеи?   -  person Navin Leon    schedule 06.06.2018
comment
Пожалуйста, опубликуйте это как новый вопрос. Как я уже сказал, это не рабочий ответ, это просто демонстрация, чтобы у вас была идея.   -  person Gerardo Furtado    schedule 06.06.2018
comment
@GerardoFurtado понял, спасибо за усилия.   -  person Navin Leon    schedule 06.06.2018
comment
@GerardoFurtado обновил jsfiddle jsfiddle.net/gx8q6ybd/39 . Пожалуйста, добавьте свой пост в качестве ответа, чтобы я мог пометить его как ответ.   -  person Navin Leon    schedule 06.06.2018
comment
Не беспокойтесь, не стесняйтесь написать ответ самостоятельно, тогда вы даже сможете его принять (через 48 часов).   -  person Gerardo Furtado    schedule 06.06.2018
comment
Однако, когда я нажимаю «Сброс», другие круги не возвращаются к своему прежнему положению — вам просто нужно сбросить симуляцию alpha с помощью simulation.alpha(1).   -  person Ankor    schedule 24.08.2018


Ответы (1)


Для ответа код обновляется здесь jsfiddle.net/gx8q6ybd/39

person Navin Leon    schedule 14.08.2018