Add per-node gravity: force.gravityCenter.

This allows the Dorling/Demers cartograms to be slightly closer to the real
geography.

Also, fix the Dorling collision detection as self-collisions were previously
being detected.  Thanks, Mike!

Lastly, I've removed the variable per-link distance as this is no longer needed.

d3.layout.js

@@ -215,6 +215,7 @@ d3.layout.force = function() {
       linkStrength = d3_layout_forceLinkStrength,
       charge = -30,
       gravity = .1,
+      gravityCenter = null,
       theta = .8,
       interval,
       nodes = [],
@@ -282,6 +283,11 @@ d3.layout.force = function() {
     y = size[1] / 2;
     i = -1; while (++i < n) {
       o = nodes[i];
+      if (gravityCenter != null) {
+        var gxy = gravityCenter.call(this, o, i);
+        x = gxy.x;
+        y = gxy.y;
+      }
       o.x += (x - o.x) * kg;
       o.y += (y - o.y) * kg;
     }
@@ -369,6 +375,12 @@ d3.layout.force = function() {
     return force;
   };
 
+  force.gravityCenter = function(x) {
+    if (!arguments.length) return gravityCenter;
+    gravityCenter = x == null ? null : d3.functor(x);
+    return force;
+  };
+
   force.theta = function(x) {
     if (!arguments.length) return theta;
     theta = x;

examples/cartogram/demers.js

@@ -11,10 +11,10 @@ var color = d3.scale.linear()
     .range(["#aad", "#556"]); 
 
 var force = d3.layout.force()
-    .gravity(0)
     .charge(0)
-    .distance(function(l) {
-      return l.length;
+    .gravity(0)
+    .gravityCenter(function(node) {
+      return node.gravity;
     })
     .size([960, 500]);
 
@@ -26,24 +26,38 @@ d3.json("../data/us-state-centroids.json", function(states) {
       links = [],
       nodes = states.features.map(function(d) {
     var xy = project(d.geometry.coordinates);
-    return idToNode[d.id] = {x: xy[0], y: xy[1], r: Math.sqrt(data[+d.id] * 5000), value: data[+d.id]};
+    return idToNode[d.id] = {
+      x: xy[0],
+      y: xy[1],
+      gravity: {x: xy[0], y: xy[1]},
+      r: Math.sqrt(data[+d.id] * 5000),
+      value: data[+d.id]
+    };
   });
 
   force
       .nodes(nodes)
       .links(links)
       .start()
       .on("tick", function(e) {
-    var k = .1 * e.alpha;
+    var k = e.alpha;
     nodes.forEach(function(a, i) {
-      nodes.forEach(function(b, i) {
+      nodes.slice(i + 1).forEach(function(b, i) {
         // Check for collision
         var dx = a.x - b.x,
             dy = a.y - b.y,
-            dr = a.r + b.r;
-        if (dx * dx < dr * dr && dy * dy < dr * dr) {
-          a.x += dx * k;
-          a.y += dy * k;
+            d = a.r + b.r,
+            lx = Math.abs(dx),
+            ly = Math.abs(dy);
+        if (lx < d && ly < d) {
+          lx = (lx - d) / lx * k;
+          ly = (ly - d) / ly * k;
+          dx *= lx;
+          dy *= ly;
+          a.x -= dx;
+          a.y -= dy;
+          b.x += dx;
+          b.y += dy;
         }
       });
     });

examples/cartogram/dorling.js

@@ -11,39 +11,55 @@ var color = d3.scale.linear()
     .range(["#aad", "#556"]); 
 
 var force = d3.layout.force()
-    .gravity(0)
     .charge(0)
-    .distance(function(l) {
-      return l.length;
+    .gravity(0)
+    .gravityCenter(function(node) {
+      return node.gravity;
     })
     .size([960, 500]);
 
-var svg = d3.select("#chart").append("svg:svg");
+var svg = d3.select("#chart").append("svg:svg")
+    .attr("width", 960 + 100)
+    .attr("height", 500 + 100)
+  .append("svg:g")
+    .attr("transform", "translate(50,50)");
 
 d3.json("../data/us-state-centroids.json", function(states) {
   var project = d3.geo.albersUsa(),
       idToNode = {},
       links = [],
       nodes = states.features.map(function(d) {
     var xy = project(d.geometry.coordinates);
-    return idToNode[d.id] = {x: xy[0], y: xy[1], r: Math.sqrt(data[+d.id] * 5000), value: data[+d.id]};
+    return idToNode[d.id] = {
+      x: xy[0],
+      y: xy[1],
+      gravity: {x: xy[0], y: xy[1]},
+      r: Math.sqrt(data[+d.id] * 5000),
+      value: data[+d.id]
+    };
   });
 
   force
       .nodes(nodes)
       .links(links)
       .start()
       .on("tick", function(e) {
-    var k = .1 * e.alpha;
+    var k = e.alpha;
     nodes.forEach(function(a, i) {
-      nodes.forEach(function(b, i) {
-        // Check for collision
+      nodes.slice(i + 1).forEach(function(b, i) {
+        // Check for collisions.
         var dx = a.x - b.x,
             dy = a.y - b.y,
-            dr = a.r + b.r;
-        if (dx * dx + dy * dy < dr * dr) {
-          a.x += dx * k;
-          a.y += dy * k;
+            l = Math.sqrt(dx * dx + dy * dy),
+            d = a.r + b.r;
+        if (l < d) {
+          l = (l - d) / l * k;
+          dx *= l;
+          dy *= l;
+          a.x -= dx;
+          a.y -= dy;
+          b.x += dx;
+          b.y += dy;
         }
       });
     });

src/layout/force.js

@@ -9,6 +9,7 @@ d3.layout.force = function() {
       linkStrength = d3_layout_forceLinkStrength,
       charge = -30,
       gravity = .1,
+      gravityCenter = null,
       theta = .8,
       interval,
       nodes = [],
@@ -76,6 +77,11 @@ d3.layout.force = function() {
     y = size[1] / 2;
     i = -1; while (++i < n) {
       o = nodes[i];
+      if (gravityCenter != null) {
+        var gxy = gravityCenter.call(this, o, i);
+        x = gxy.x;
+        y = gxy.y;
+      }
       o.x += (x - o.x) * kg;
       o.y += (y - o.y) * kg;
     }
@@ -163,6 +169,12 @@ d3.layout.force = function() {
     return force;
   };
 
+  force.gravityCenter = function(x) {
+    if (!arguments.length) return gravityCenter;
+    gravityCenter = x == null ? null : d3.functor(x);
+    return force;
+  };
+
   force.theta = function(x) {
     if (!arguments.length) return theta;
     theta = x;