Restore stable squarified treemaps.

README.md

@@ -192,7 +192,11 @@ Introduced by [Ben Shneiderman](http://www.cs.umd.edu/hcil/treemap-history/) in
 
 …
 
-<a name="_treemap" href="#_treemap">#</a> <i>treemap</i>(<i>root</i>)
+<a name="_treemap" href="#_treemap">#</a> <i>treemap</i>(<i>data</i>)
+
+…
+
+<a name="treemap_update" href="#treemap_update">#</a> <i>treemap</i>.<b>update</b>(<i>root</i>)
 
 …
 
@@ -264,7 +268,7 @@ Introduced by [Ben Shneiderman](http://www.cs.umd.edu/hcil/treemap-history/) in
 
 …
 
-<a name="_partition" href="#_partition">#</a> <i>partition</i>(<i>root</i>)
+<a name="_partition" href="#_partition">#</a> <i>partition</i>(<i>data</i>)
 
 …
 
@@ -296,7 +300,7 @@ Introduced by [Ben Shneiderman](http://www.cs.umd.edu/hcil/treemap-history/) in
 
 …
 
-<a name="_pack" href="#_pack">#</a> <i>pack</i>(<i>root</i>)
+<a name="_pack" href="#_pack">#</a> <i>pack</i>(<i>data</i>)
 
 …
 

src/treemap/index.js

@@ -21,6 +21,10 @@ export default function() {
     var root = hierarchyNode(data);
     hierarchyValue(root, value);
     if (sort) hierarchySort(root, sort);
+    return position(root);
+  }
+
+  function position(root) {
     root.x0 =
     root.y0 = -paddingInner;
     root.x1 = dx + paddingInner;
@@ -52,6 +56,11 @@ export default function() {
     }
   }
 
+  treemap.update = function(root) {
+    hierarchyValue(root, value);
+    return position(root);
+  };
+
   treemap.value = function(x) {
     return arguments.length ? (value = required(x), treemap) : value;
   };

src/treemap/squarify.js

@@ -21,24 +21,37 @@ export default (function custom(ratio) {
     while (i0 < n) {
       dx = x1 - x0, dy = y1 - y0;
       sumValue = (node = nodes[i0]).value;
-      minValue = maxValue = sumValue;
-      alpha = Math.max(dy / dx, dx / dy) / (value * ratio);
-      beta = sumValue * sumValue * alpha;
-      minRatio = Math.max(maxValue / beta, beta / minValue);
 
-      // Keep adding nodes while the aspect ratio maintains or improves.
-      for (i1 = i0 + 1; i1 < n; ++i1) {
-        sumValue += nodeValue = nodes[i1].value;
-        if (nodeValue < minValue) minValue = nodeValue;
-        if (nodeValue > maxValue) maxValue = nodeValue;
+      // Are we updating a previous squarified layout?
+      if (node._squarify) {
+        for (i1 = i0 + 1; i1 < Math.abs(node._squarify); ++i1) {
+          sumValue += nodes[i1].value;
+        }
+      }
+
+      // Otherwise, we’re computing a squarified layout from scratch.
+      else {
+        minValue = maxValue = sumValue;
+        alpha = Math.max(dy / dx, dx / dy) / (value * ratio);
         beta = sumValue * sumValue * alpha;
-        newRatio = Math.max(maxValue / beta, beta / minValue);
-        if (newRatio > minRatio) { sumValue -= nodeValue; break; }
-        minRatio = newRatio;
+        minRatio = Math.max(maxValue / beta, beta / minValue);
+
+        // Keep adding nodes while the aspect ratio maintains or improves.
+        for (i1 = i0 + 1; i1 < n; ++i1) {
+          sumValue += nodeValue = nodes[i1].value;
+          if (nodeValue < minValue) minValue = nodeValue;
+          if (nodeValue > maxValue) maxValue = nodeValue;
+          beta = sumValue * sumValue * alpha;
+          newRatio = Math.max(maxValue / beta, beta / minValue);
+          if (newRatio > minRatio) { sumValue -= nodeValue; break; }
+          minRatio = newRatio;
+        }
+
+        node._squarify = dx < dy ? i1 : -i1;
       }
 
       // Position the row horizontally along the top of the rect.
-      if (dx < dy) {
+      if (node._squarify > 0) {
         for (x2 = x0, y2 = y0 + dy * sumValue / value, dx /= sumValue; i0 < i1; ++i0) {
           node = nodes[i0], node.x0 = x2, node.y0 = y0, node.y1 = y2;
           node.x1 = x2 += node.value * dx;

test/treemap/flare-test.js

@@ -47,6 +47,7 @@ function test(input, expected, tile) {
         node.y1 = round(node.y1);
         delete node.parent;
         delete node.data;
+        delete node._squarify;
         if (node.children) node.children.forEach(visit);
       })(actual);