D3 force simulation - Bring nodes closer to a point in same angle

Question

This question is based on Move d3 circles away from center circle - force layout where when size of a node N1 is changed and I ran simulation on the nodes, the nodes around the N1 will move away in the same angle but the question I have here is to bring the nodes back closer to the N1 when its size is changed back to original. How can I achieve that?

I have used below but the nodes are not coming closer

simulation.nodes(nodes);
simulation.restart();
for (var i = 0; i < 300; ++i) simulation.tick();

Also, if I try with force simulation then the position of the other nodes are completely changing, please see the video here http://recordit.co/797i1E8ocT

d3.forceSimulation(nodes)
    .force('x', d3.forceX(plot.x))
    .force('y', d3.forceY(plot.y))

Thanks in advance.

Answer 1

Nodes are not coming closer because your simulation "speed", which is called alpha value, is exhausted (decayed). Just replace

simulation.restart();

which you don't need with

simulation.alpha(1);

and the nodes will behave properly.

However, as you have noted, after several expansions and collapses nodes can move significantly from their initial locations. This problem can be addressed in several ways. You can use some kind of determenistic algorithm to compute nodes locations such as tree layout, but it can be difficult to achieve smooth transitions when nodes are being expanded and collapsed. Another way is to "pin" nodes to their initial locations using additional forces, that attract each node to its first calculated position.

To implement it you can save the initial positions after the simulation initialization and its first run:

for (let d of data.children) {
  d.initialX = d.x;
  d.initialY = d.y;
}

And then replace x and y forces with forces which attract each node to its initial position:

simulation
  .force("x", d3.forceX(d => d.initialX).strength(0.2))
  .force("y", d3.forceY(d => d.initialY).strength(0.2));

The strength determines the balance between collision force and pinning. The larger the strength, the more aggressively the nodes will try to occupy their initial positions.

It may also be desirable to use point attraction instead of the sum of x and y ones — take a look at d3-force-attract package.

The following snippet illustrates the described approach.

var w = 650,
  h = 650;
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: 'blue'
  }, {
    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 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();

  for (let d of data.children) {
    d.initialX = d.x;
    d.initialY = d.y;
  }

  simulation
    .force("x", d3.forceX(d => d.initialX).strength(0.2))
    .force("y", d3.forceY(d => d.initialY).strength(0.2));

  let nodeLevel1 = svg.selectAll('circle')
    .data(data.children, (d) => {
      // Attaching key for uniqueness
      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)

  nodeLevel1Enter
    .transition()
    .duration(1600)
    .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('#updatebluesize').on('click', function() {
    addblue();
  })
  d3.select('#resetsize').on('click', function() {
    reset();
  })
  d3.select('#resetall').on('click', function() {
    resetall();
  })

  var add = function() {
    data.children[0].size = 140;
    move();
  }
  var addblue = function() {
    data.children[2].size = 100;
    move();
  }
  var reset = function() {
    data.children[0].size = 20;
    move();
  }
  var resetall = function() {
    data.children[0].size = 20;
    data.children[2].size = 20;
    move();
  }

  function move() {
    simulation.nodes(data.children);
    simulation.alpha(1);
    for (var i = 0; i < 300; ++i) simulation.tick();
    nodeLevel1Enter
      .transition()
      .duration(1600)
      .attr("cx", function(d) {
        return d.x
      })
      .attr("cy", function(d) {
        return d.y
      })
      .attr("r", function(d) {
        return d.size
      });
  }
}

render();

<script src="https://d3js.org/d3.v4.min.js"></script>

<a href='javascript:;' id='updatesize'>Update red resource size</a> |
<a href='javascript:;' id='updatebluesize'>Update blue resource size</a> |
<a href='javascript:;' id='resetsize'>Reset red resource size</a> |
<a href='javascript:;' id='resetall'>Reset all</a>