layerchart 0.3.3 → 0.3.6

package/components/Treemap.svelte

@@ -19,6 +19,7 @@ export let paddingTop = 0;
 export let paddingBottom = 0;
 export let paddingLeft = undefined;
 export let paddingRight = undefined;
+export let nodeKey = (node, i) => i;
 export let selected = null;
 $: tileFunc =
     tile === 'squarify'
@@ -34,32 +35,35 @@ $: tileFunc =
                         : tile === 'sliceDice'
                             ? d3.treemapSliceDice
                             : tile;
-$: treemap = d3.treemap().size([$width, $height]).tile(aspectTile(tileFunc, $width, $height));
-$: if (padding) {
-    treemap.padding(padding);
-}
-$: if (paddingInner) {
-    treemap.paddingInner(paddingInner);
-}
-$: if (paddingOuter) {
-    treemap.paddingOuter(paddingOuter);
-}
-$: if (paddingTop) {
-    treemap.paddingTop(paddingTop);
-}
-$: if (paddingBottom) {
-    treemap.paddingBottom(paddingBottom);
-}
-$: if (paddingLeft) {
-    treemap.paddingLeft(paddingLeft);
-}
-$: if (paddingLeft) {
-    treemap.paddingRight(paddingRight);
+let treemap;
+$: {
+    treemap = d3.treemap().size([$width, $height]).tile(aspectTile(tileFunc, $width, $height));
+    if (padding) {
+        treemap.padding(padding);
+    }
+    if (paddingInner) {
+        treemap.paddingInner(paddingInner);
+    }
+    if (paddingOuter) {
+        treemap.paddingOuter(paddingOuter);
+    }
+    if (paddingTop) {
+        treemap.paddingTop(paddingTop);
+    }
+    if (paddingBottom) {
+        treemap.paddingBottom(paddingBottom);
+    }
+    if (paddingLeft) {
+        treemap.paddingLeft(paddingLeft);
+    }
+    if (paddingRight) {
+        treemap.paddingRight(paddingRight);
+    }
 }
 $: root = treemap($data);
 $: selected = root; // set initial selection
-// group nodes by height so can be rendered lowest to highest
-$: nodesByHeight = group(root, (d) => d.height);
+// group nodes by depth so can be rendered lowest to highest
+$: nodesByDepth = group(root, (d) => d.depth);
 const duration = 800;
 const extents = tweened(undefined, { easing: cubicOut, duration });
 $: $extents = selected
@@ -80,9 +84,9 @@ $: yScale = scaleLinear().domain([$extents.y0, $extents.y1]).rangeRound([0, $hei
 </script>
 
 <RectClipPath width={$width} height={$height}>
-	{#each Array.from(nodesByHeight) as [height, nodes]}
+	{#each Array.from(nodesByDepth) as [depth, nodes]}
 		<g>
-			{#each nodes as node}
+			{#each nodes as node, i (nodeKey(node, i))}
 				<slot
 					name="node"
 					{node}

package/components/Treemap.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         paddingBottom?: number;
         paddingLeft?: any;
         paddingRight?: any;
+        nodeKey?: (node: d3.HierarchyNode<any>, i: number) => any;
         selected?: any;
     };
     events: {
@@ -17,7 +18,7 @@ declare const __propDef: {
     };
     slots: {
         node: {
-            node: d3.HierarchyRectangularNode<unknown>;
+            node: unknown;
             rect: {
                 x: number;
                 y: number;

package/package.json

@@ -3,8 +3,9 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.3.3",
+  "version": "0.3.6",
   "devDependencies": {
+    "@rollup/plugin-dsv": "^2.0.3",
     "@sveltejs/adapter-vercel": "^1.0.0-next.47",
     "@sveltejs/kit": "^1.0.0-next.303",
     "@tailwindcss/typography": "^0.5.2",

package/utils/treemap.d.ts

@@ -1,6 +1,10 @@
 /**
- * This custom tiling function adapts the built-in binary tiling function
+ * This custom tiling function adapts the tiling function
  * for the appropriate aspect ratio when the treemap is zoomed-in.
  * see: https://observablehq.com/@d3/zoomable-treemap#tile and https://observablehq.com/@d3/stretched-treemap
  */
 export declare function aspectTile(tile: any, width: any, height: any): (node: any, x0: any, y0: any, x1: any, y1: any) => void;
+/**
+ * Show if the node (a) is a child of the selected (b), or any parent above selected
+ */
+export declare function isNodeVisible(a: any, b: any): boolean;

package/utils/treemap.js

@@ -1,5 +1,5 @@
 /**
- * This custom tiling function adapts the built-in binary tiling function
+ * This custom tiling function adapts the tiling function
  * for the appropriate aspect ratio when the treemap is zoomed-in.
  * see: https://observablehq.com/@d3/zoomable-treemap#tile and https://observablehq.com/@d3/stretched-treemap
  */
@@ -14,3 +14,14 @@ export function aspectTile(tile, width, height) {
         }
     };
 }
+/**
+ * Show if the node (a) is a child of the selected (b), or any parent above selected
+ */
+export function isNodeVisible(a, b) {
+    while (b) {
+        if (a.parent === b)
+            return true;
+        b = b.parent;
+    }
+    return false;
+}