Merge pull request #183 from redbearsam/feature/treemap_sensible_margins

use the native d3 treemap functionality to calculate the new coordina…
finos · May 7, 2019 · 923e9da · 923e9da
2 parents 961eed5 + 5b20d79
commit 923e9da
Showing 1 changed file with 38 additions and 13 deletions.
diff --git a/packages/perspective-viewer-d3fc/src/js/series/treemap/treemapLevelCalculation.js b/packages/perspective-viewer-d3fc/src/js/series/treemap/treemapLevelCalculation.js
@@ -8,10 +8,36 @@
  */
 
 import {calcWidth, calcHeight} from "./treemapSeries";
+import {hierarchy} from "d3";
+import treemapLayout from "./treemapLayout";
 
 const includesAllCrossValues = (d, crossValues) => crossValues.every(val => d.crossValue.split("|").includes(val));
 
 export function calculateSubTreeMap(d, crossValues, nodesMerge, treemapLevel, rootNode) {
+    // We can approximate coordinates for most of the tree which will be shunted beyond the viewable area.
+    // This approach alone results in excessive margins as one goes deeper into the treemap.
+    approximateAttributesForAllNodes(d, crossValues, nodesMerge, treemapLevel, rootNode);
+    d.mapLevel[treemapLevel].levelRoot = true;
+    // Use the pre-existing d3 mechanism to calculate the subtree for the viewable area.
+    recalculateVisibleSubTreeCoordinates(d, rootNode.x1 - rootNode.x0, rootNode.y1 - rootNode.y0, treemapLevel);
+}
+
+export function calculateRootLevelMap(nodesMerge, rootNode) {
+    nodesMerge.each(d => {
+        d.mapLevel = [];
+        d.mapLevel[0] = {
+            x0: d.x0,
+            x1: calcWidth(d) + d.x0,
+            y0: d.y0,
+            y1: calcHeight(d) + d.y0,
+            visible: true,
+            opacity: 1
+        };
+    });
+    rootNode.mapLevel[0].levelRoot = true;
+}
+
+function approximateAttributesForAllNodes(d, crossValues, nodesMerge, treemapLevel, rootNode) {
     const oldDimensions = {x: d.x0, y: d.y0, width: d.x1 - d.x0, height: d.y1 - d.y0};
     const newDimensions = {width: rootNode.x1 - rootNode.x0, height: rootNode.y1 - rootNode.y0};
     const dimensionMultiplier = {width: newDimensions.width / oldDimensions.width, height: newDimensions.height / oldDimensions.height};
@@ -31,20 +57,19 @@ export function calculateSubTreeMap(d, crossValues, nodesMerge, treemapLevel, ro
             opacity: visible ? 1 : 0
         };
     });
-    d.mapLevel[treemapLevel].levelRoot = true;
 }
 
-export function calculateRootLevelMap(nodesMerge, rootNode) {
-    nodesMerge.each(d => {
-        d.mapLevel = [];
-        d.mapLevel[0] = {
-            x0: d.x0,
-            x1: calcWidth(d) + d.x0,
-            y0: d.y0,
-            y1: calcHeight(d) + d.y0,
-            visible: true,
-            opacity: 1
-        };
+function recalculateVisibleSubTreeCoordinates(subTreeRoot, treeRootWidth, treeRootHeight, treemapLevel) {
+    const treemapBlueprinter = treemapLayout(treeRootWidth, treeRootHeight);
+    const treemapBlueprint = treemapBlueprinter(hierarchy(subTreeRoot.data).sum(d => d.size));
+
+    const dummiedDescendants = treemapBlueprint.descendants();
+    const descendants = subTreeRoot.descendants();
+
+    dummiedDescendants.forEach((_, i) => {
+        descendants[i].mapLevel[treemapLevel].x0 = dummiedDescendants[i].x0;
+        descendants[i].mapLevel[treemapLevel].x1 = dummiedDescendants[i].x1;
+        descendants[i].mapLevel[treemapLevel].y0 = dummiedDescendants[i].y0;
+        descendants[i].mapLevel[treemapLevel].y1 = dummiedDescendants[i].y1;
     });
-    rootNode.mapLevel[0].levelRoot = true;
 }