Node splitting

Mouseover to repel nodes. Adapted from my talk on force layouts. Compare to the canvas version.

forked from mbostock's block: Collision Detection

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<style>
  line.link {
    pointer-events: none;
  }
</style>
<script>

var width = 960,
    height = 500;

var circles = d3.range(10).map(function(i) { 
  return {
    radius: Math.random() * 12 + 8,
    index: i,
    radius: 15,
    group: Math.floor((i)/4) % 4
  }; 
})
var nodes = [{index: -1, group: -1, radius: 200 }].concat(circles)

//var circles = nodes.slice(1)
var links = [
  {source: circles[0], target: circles[1], type: "bond"},
  {source: circles[1], target: circles[2], type: "bond"},
  {source: circles[2], target: circles[3], type: "bond"},
  {source: circles[3], target: circles[0], type: "bond"},
];
  
var root = nodes[0];
var color = d3.scale.category10();

root.radius = 0;
root.fixed = true;

var force = d3.layout.force()
    .gravity(0.05)
    //.charge(function(d, i) { return i ? 0 : -200; })
    //.linkStrength(function(l, i) { return l.strength || 0 })
		//.linkStrength(0.5)
    //.linkDistance(10)
    .nodes(nodes)
    .size([width, height]);

force.start();

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

svg.selectAll("circle")
    .data(circles)
  .enter().append("circle").classed("node", true)
    .attr("r", function(d) { return d.radius; })
    .style("fill", function(d, i) { return color(d.group); })
  .on("mouseout", splitNode)
.call(force.drag)

svg.append("line")
  .datum(newLink)
  .classed("link", true)
  .attr({
  stroke: "#111"
})
  
}
  
svg.selectAll("line")
  .data(links)
.enter().append("line").classed("link", true)
.attr({
  stroke: "#111"
})

force.on("tick", function(e) {
  var nodes = force.nodes()

// collision detection
  var q = d3.geom.quadtree(nodes);
  nodes.forEach(function(node) {
    q.visit(collide(node))
  })

// strongly coupling certain nodes
  links.forEach(function(link) {
    var source = link.source;
    var target = link.target;
    if(link.type == "bond") {
      var x = source.x - target.x;
      var y = source.y - target.y;
      var dist = Math.sqrt(x * x + y * y);
      var r = source.radius + target.radius;
      
      if (dist < r) {
        dist = (dist - r) / dist * .5; //don't quite understand this
        source.x -= x *= dist;
        source.y -= y *= dist;
        target.x += x;
        target.y += y;
      } else {
        dist = -0.021; // not sure how to do the opposive of above
        source.x += x *= dist;
        source.y += y *= dist;
        target.x -= x;
        target.y -= y;
      }
    }
    link.strength = 1;
  })

svg.selectAll("circle.node")
  .attr({
    cx: function(d) {return d.x },
    cy: function(d) { return d.y },
    r: function(d) { return d.radius }
  })
   
  svg.selectAll("line.link")
  .attr({
    x1: function(d) { return d.source.x },
    y1: function(d) { return d.source.y },
    x2: function(d) { return d.target.x },
    y2: function(d) { return d.target.y },
  })
});

svg.on("mousemove", function() {
  //var p1 = d3.mouse(this);
  //root.px = p1[0];
  //root.py = p1[1];
  force.resume();
});

</script>

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