Fix treemap overlap problem.

See d3#136.
abh · Jan 25, 2012 · 1708e5e · 1708e5e
1 parent ad76418
commit 1708e5e
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 35 deletions.
diff --git a/d3.layout.js b/d3.layout.js
@@ -1773,26 +1773,26 @@ d3.layout.treemap = function() {
         v = u ? round(row.area / u) : 0,
         o;
     if (u == rect.dx) { // horizontal subdivision
-      if (flush || v > rect.dy) v = v ? rect.dy : 0; // over+underflow
+      if (flush || v > rect.dy) v = rect.dy; // over+underflow
       while (++i < n) {
         o = row[i];
         o.x = x;
         o.y = y;
         o.dy = v;
-        x += o.dx = v ? round(o.area / v) : 0;
+        x += o.dx = Math.min(rect.x + rect.dx - x, v ? round(o.area / v) : 0);
       }
       o.z = true;
       o.dx += rect.x + rect.dx - x; // rounding error
       rect.y += v;
       rect.dy -= v;
     } else { // vertical subdivision
-      if (flush || v > rect.dx) v = v ? rect.dx : 0; // over+underflow
+      if (flush || v > rect.dx) v = rect.dx; // over+underflow
       while (++i < n) {
         o = row[i];
         o.x = x;
         o.y = y;
         o.dx = v;
-        y += o.dy = v ? round(o.area / v) : 0;
+        y += o.dy = Math.min(rect.y + rect.dy - y, v ? round(o.area / v) : 0);
       }
       o.z = false;
       o.dy += rect.y + rect.dy - y; // rounding error

diff --git a/d3.layout.min.js b/d3.layout.min.js
diff --git a/src/layout/treemap.js b/src/layout/treemap.js
@@ -110,26 +110,26 @@ d3.layout.treemap = function() {
         v = u ? round(row.area / u) : 0,
         o;
     if (u == rect.dx) { // horizontal subdivision
-      if (flush || v > rect.dy) v = v ? rect.dy : 0; // over+underflow
+      if (flush || v > rect.dy) v = rect.dy; // over+underflow
       while (++i < n) {
         o = row[i];
         o.x = x;
         o.y = y;
         o.dy = v;
-        x += o.dx = v ? round(o.area / v) : 0;
+        x += o.dx = Math.min(rect.x + rect.dx - x, v ? round(o.area / v) : 0);
       }
       o.z = true;
       o.dx += rect.x + rect.dx - x; // rounding error
       rect.y += v;
       rect.dy -= v;
     } else { // vertical subdivision
-      if (flush || v > rect.dx) v = v ? rect.dx : 0; // over+underflow
+      if (flush || v > rect.dx) v = rect.dx; // over+underflow
       while (++i < n) {
         o = row[i];
         o.x = x;
         o.y = y;
         o.dx = v;
-        y += o.dy = v ? round(o.area / v) : 0;
+        y += o.dy = Math.min(rect.y + rect.dy - y, v ? round(o.area / v) : 0);
       }
       o.z = false;
       o.dy += rect.y + rect.dy - y; // rounding error

diff --git a/test/layout/treemap-test.js b/test/layout/treemap-test.js
@@ -137,34 +137,16 @@ suite.addBatch({
     },
     "no negatively sized rectangles": function(treemap) {
       var t = treemap().size([615, 500]).sort(function(a, b) { return a.value - b.value; }).padding(29),
-          nodes = t.nodes({"children": [
-            {"value": 1},
-            {"value": 9},
-            {"value": 3},
-            {"value": 15},
-            {"value": 44},
-            {"value": 28},
-            {"value": 32},
-            {"value": 41},
-            {"value": 50},
-            {"value": 60},
-            {"value": 64},
-            {"value": 75},
-            {"value": 76},
-            {"value": 84},
-            {"value": 88},
-            {"value": 100},
-            {"value": 140},
-            {"value": 142},
-            {"value": 363},
-            {"value": 657},
-            {"value": 670},
-            {"value": 822},
-            {"value": 1173},
-            {"value": 1189}
-          ]}).map(layout);
+          data = [1, 9, 3, 15, 44, 28, 32, 41, 50, 60, 64, 75, 76, 84, 88, 100, 140, 142, 363, 657, 670, 822, 1173, 1189],
+          nodes = t.nodes({children: data.map(function(d) { return {value: d}; })}).map(layout);
       assert.equal(nodes.filter(function(n) { return n.dx < 0 || n.dy < 0; }).length, 0);
     },
+    "no overhanging rectangles": function(treemap) {
+      var t = treemap().size([100, 100]).sort(function(a, b) { return a.value - b.value; }),
+          data = [0, 0, 81681.85, 370881.9, 0, 0, 0, 255381.59, 0, 0, 0, 0, 0, 0, 0, 125323.95, 0, 0, 0, 186975.07, 185707.05, 267370.93, 0]
+          nodes = t.nodes({children: data.map(function(d) { return {value: d}; })}).map(layout);
+      assert.equal(nodes.filter(function(n) { return n.dx < 0 || n.dy < 0 || n.x + n.dx > 100 || n.y + n.dy > 100; }).length, 0);
+    },
     "can handle an empty children array": function(treemap) {
       assert.deepEqual(treemap().nodes({children: []}).map(layout), [
         {x: 0, y: 0, dx: 1, dy: 1}