Enter-Update-Exit in Force Layout

The force graph has been the subject of my fascination in the recent couple weeks. One of the fun things about the force layout is that the positioning of each node and link is calculated at every tick, which means the normal update-transition paradigm doesn't work too well.

This was my approach to the enter-update-exit pattern in a force graph, and other then a couple bounces of the nodes, seem to work pretty decently.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: Helvetica;
}

.update {
  color: #888888;
  position:absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  margin: 10px;
  cursor: pointer;
  border: 1px solid #999999;
  border-radius: 3px;
}

.node circle {
  fill: #888888;
  stroke: #fff;
  stroke-width: 2px;
}

.node text {
  fill: #888888;
  stroke: none;
  font-size: .6em;
}

.link {
  stroke: #cccccc;
  stroke-opacity: .6;
}

</style>
<body>

var width = 400,
    height = 400,
    nodes, links, oldNodes, // data
    svg, node, link, // d3 selections
    force = d3.layout.force()
    .charge(-300)
    .linkDistance(50)
    .size([width, height]);

function randomData() {
  oldNodes = nodes;
  // generate some data randomly
  nodes = _.chain(_.range(_.random(10, 20)))
    .map(function() {
      var node = {};
      node.key = _.random(0, 30);
      node.weight = _.random(4, 10);

return node;
    }).uniq(function(node) {
      return node.key
    }).value();

if (oldNodes) {
    var add = _.initial(oldNodes, _.random(0, oldNodes.length));
    add = _.rest(add, _.random(0, add.length));

nodes = _.union(nodes, add);
  }

links = _.map(_.range(_.random(15, 25)), function() {
      var link = {};
      link.source = _.random(0, nodes.length - 1);
      link.target = _.random(0, nodes.length - 1);
      link.weight = _.random(1, 3);

return link;
    });

maintainNodePositions();

}

function render() {
  randomData();
  force.nodes(nodes).links(links);

svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

link = svg.selectAll(".link");
  node = svg.selectAll(".node");

force.start();
}

function update() {
  randomData();
  force.nodes(nodes).links(links);

var l = svg.selectAll(".link")
    .data(links, function(d) {return d.source + "," + d.target});
  var n = svg.selectAll(".node")
    .data(nodes, function(d) {return d.key});
  enterLinks(l);
  exitLinks(l);
  enterNodes(n);
  exitNodes(n);
  link = svg.selectAll(".link");
  node = svg.selectAll(".node");

link.style("stroke-width", function(d) { return d.weight; });

node.select("circle").attr("r", function(d) {return d.weight});

force.start();
}

function enterNodes(n) {
  var g = n.enter().append("g")
    .attr("class", "node");

g.append("circle")
    .attr("cx", 0)
    .attr("cy", 0)
    .attr("r", function(d) {return d.weight})
    .call(force.drag);

g.append("text")
    .attr("x", function(d) {return d.weight + 5})
    .attr("dy", ".35em")
    .text(function(d) {return d.key});
}

function exitNodes(n) {
  n.exit().remove();
}

function enterLinks(l) {
  l.enter().insert("line", ".node")
    .attr("class", "link")
    .style("stroke-width", function(d) { return d.weight; });
}

function exitLinks(l) {
  l.exit().remove();
}

force.on("tick", function(e) {
  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});

render();

</script>

<div class="update" onClick="update()">update</update>

</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://underscorejs.org/underscore-min.js to a secure url

https://d3js.org/d3.v3.min.js

https://underscorejs.org/underscore-min.js