layerchart 0.3.2 → 0.3.5

package/components/Treemap.svelte

@@ -8,7 +8,6 @@ import { cubicOut } from 'svelte/easing';
 import * as d3 from 'd3-hierarchy';
 import { scaleLinear } from 'd3-scale';
 import { group } from 'd3-array';
-import Group from './Group.svelte';
 import RectClipPath from './RectClipPath.svelte';
 import { aspectTile } from '../utils/treemap';
 const { data, width, height } = getContext('LayerCake');
@@ -35,32 +34,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
@@ -81,24 +83,19 @@ $: 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}
-				{@const nodeWidth = xScale(node.x1) - xScale(node.x0)}
-				{@const nodeHeight = yScale(node.y1) - yScale(node.y0)}
-				<Group x={xScale(node.x0)} y={yScale(node.y0)}>
-					<RectClipPath width={nodeWidth} height={nodeHeight}>
-						<slot
-							{node}
-							rect={{
-								x: 0, // applied by Group
-								y: 0, // applied by Group
-								width: nodeWidth,
-								height: nodeHeight
-							}}
-						/>
-					</RectClipPath>
-				</Group>
+				<slot
+					name="node"
+					{node}
+					rect={{
+						x: xScale(node.x0),
+						y: yScale(node.y0),
+						width: xScale(node.x1) - xScale(node.x0),
+						height: yScale(node.y1) - yScale(node.y0)
+					}}
+				/>
 			{/each}
 		</g>
 	{/each}

package/components/Treemap.svelte.d.ts

@@ -16,13 +16,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {
-            node: d3.HierarchyRectangularNode<unknown>;
+        node: {
+            node: unknown;
             rect: {
                 x: number;
                 y: number;
-                width: any;
-                height: any;
+                width: number;
+                height: number;
             };
         };
     };

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.3.2",
+  "version": "0.3.5",
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^1.0.0-next.47",
     "@sveltejs/kit": "^1.0.0-next.303",

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;
+}