├── .gitignore ├── .npmignore ├── README.md ├── dist ├── d3.d.ts ├── example │ └── index.html ├── index.d.ts ├── initializeSVG.d.ts ├── links │ ├── draw-links.d.ts │ ├── link-enter.d.ts │ ├── link-exit.d.ts │ └── link-update.d.ts ├── nodes │ ├── node-enter.d.ts │ ├── node-exit.d.ts │ └── node-update.d.ts ├── prepare-data.d.ts ├── treeviz.js ├── typings.d.ts └── utils.d.ts ├── example ├── example.ts └── index.html ├── package.json ├── src ├── d3.ts ├── index.ts ├── initializeSVG.ts ├── links │ ├── draw-links.ts │ ├── link-enter.ts │ ├── link-exit.ts │ └── link-update.ts ├── nodes │ ├── node-enter.ts │ ├── node-exit.ts │ └── node-update.ts ├── prepare-data.ts ├── typings.ts ├── utils.ts └── vite-env.d.ts ├── tsconfig.json ├── vite.config.ts └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist-ssr 12 | *.local 13 | 14 | # Editor directories and files 15 | .vscode/* 16 | !.vscode/extensions.json 17 | .idea 18 | .DS_Store 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | example/ 3 | vite.config.ts 4 | tsconfig.json 5 | dist/example/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Treeviz 2 | 3 | [![Known Vulnerabilities](https://snyk.io/test/github/dwyl/hapi-auth-jwt2/badge.svg?targetFile=package.json)](https://snyk.io/test/github/dwyl/hapi-auth-jwt2?targetFile=package.json) 4 | [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE) 5 | 6 | This javascript module aims at providing an easy interface in order to represent tree diagrams on screen with the ability to handle dynamic data flows. The data format must be JSON. 7 | 8 | ![](https://i.imgur.com/vyB2Erg.gif) 9 | 10 | ## Installation 11 | 12 | With npm : 13 | 14 | ```Bash 15 | npm install treeviz 16 | ``` 17 | 18 | and then you can use it with : 19 | 20 | ```JavaScript 21 | import {Treeviz} from 'treeviz'; 22 | ``` 23 | 24 | Or download this zip repository in the Github Release section and link the dist/treeviz.js file in your page directly : ` 55 | ``` 56 | 57 | To update the tree visually you will just have to pass new data to the `refresh` method like this : 58 | 59 | ```JS 60 | myTree.refresh(data); 61 | myTree.refresh(data_update1); 62 | myTree.refresh(data_update2); 63 | ``` 64 | 65 | The tree will be clever enough to updates only the part of the trees that have been added or removed in the dataset, and so it won't redraw the entire tree. 66 | 67 | [Treeviz Example](https://codepen.io/pierrecapo/pen/MPbBdv) 68 | 69 | #### Hierarchical data case : 70 | 71 | ```js 72 | var hierarchical_data_example = { 73 | name: "Mom", 74 | qty: 10, 75 | children: [ 76 | { name: "Son A", qty: 3 }, 77 | { name: "Son B", qty: 7 }, 78 | ], 79 | }; 80 | 81 | var myTree = Treeviz.create({ 82 | htmlId: "tree", 83 | idKey: "name", 84 | hasFlatData: false, 85 | relationnalField: "children", 86 | }); 87 | 88 | myTree.refresh(hierarchical_data_example); 89 | ``` 90 | 91 | ## API 92 | 93 | The big part of the API is configuring the tree before passing data to it : 94 | 95 | ```JS 96 | Treeviz.create(config); 97 | ``` 98 | 99 | The table below lists all the avalaible key that the config object can have 100 | 101 | | Key | Type | Default | Definition | 102 | | -------------------------- | --------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 103 | | `htmlId` | string (Required) | | The HTML id tag on the page where the tree should be drawn. It must have a width and an height specified | 104 | | `idKey` | string | "id" | The key in a data item representing the unique identifier of a node | 105 | | `relationnalField` | string | "father" | In case of flat dataset, usually the relationnal field between each node is the field representing the father of the node, linking it to the id of the field. (See example below). | 106 | | `hasFlatData` | boolean | true | Specify whether the data passed to the tree is flat or already hierarchical | 107 | | `hasPan` | boolean | false | Toggle the ability to pan the tree | 108 | | `hasZoom` | boolean | false | Toggle the ability to zoom the tree | 109 | | `nodeWidth` | number | 160 | Width of a node in px | 110 | | `nodeHeight` | number | 100 | Height of a node in px | 111 | | `linkColor` | function | (node: NodeData) => "#ffcc80" | Color of the link | 112 | | `linkWidth` | function | (node: NodeData) => 10 | Width of the link | 113 | | `linkShape` | "quadraticBeziers" \| "orthogonal" \| "curve" | "quadraticBeziers" | Shape of the link | 114 | | `renderNode` | function | (node: NodeData) => null | HTML template for every node | 115 | | `isHorizontal` | boolean | true | Direction of the tree. If true, the tree expands from left to right. If false, it goes from top to bottom | 116 | | `onNodeClick` | function | (node: NodeData) => null | Function handling the event when someone click on it | 117 | | `onNodeMouseEnter` | function | (node: NodeData) => null | Function handling the event when someone hover a node | 118 | | `onNodeMouseLeave` | function | (node: NodeData) => null | Function handling the event when the mouse pointer leaves a node | 119 | | `mainAxisNodeSpacing` | number or "auto" | 300 | Set the distance in pixels between two depths in the tree. If the value is `auto` it will automatically display the tree to fit the size of the container. | 120 | | `secondaryAxisNodeSpacing` | number | 1.25 | Set the distance between nodes in the same level as a coefficient of node dimensions. Recommended to have the value superior to 1 | 121 | | `marginTop` | number | 1.25 | Set the margin between the SVG element and the tree | 122 | | `marginBottom` | number | 1.25 | Set the margin between the SVG element and the tree | 123 | | `marginLeft` | number | 1.25 | Set the margin between the SVG element and the tree | 124 | | `marginRight` | number | 1.25 | Set the margin between the SVG element and the tree | 125 | | `duration` | number | 600 | The duration of the animation transition between layouts | 126 | | `data` | any | | Needed for Typescript projects only to type the `NodeData` argument | 127 | 128 | And then, we have the `NodeData` type that is passed as callback of some functions: 129 | ` 130 | type NodeData { 131 | data: // the data of each item 132 | settings: // the settings object 133 | } 134 | ` 135 | 136 | ## Contributing 137 | 138 | - Clone the repo. 139 | - Run `npm install`. 140 | - Run `npm run dev`, then you can edit the files in the `./src` folder and the `./example/index.html` file. 141 | - To publish (admin rights), run `npm run build && npm publish`. 142 | 143 | ## Credits 144 | 145 | This module is based on d3 library, credit to all the contributors of this project. 146 | 147 | ## License 148 | 149 | MIT 150 | -------------------------------------------------------------------------------- /dist/d3.d.ts: -------------------------------------------------------------------------------- 1 | import { hierarchy, stratify, tree, treemap } from "d3-hierarchy"; 2 | import { select, selectAll } from "d3-selection"; 3 | import { zoom } from "d3-zoom"; 4 | declare const _default: { 5 | hierarchy: typeof hierarchy; 6 | stratify: typeof stratify; 7 | tree: typeof tree; 8 | treemap: typeof treemap; 9 | select: typeof select; 10 | selectAll: typeof selectAll; 11 | zoom: typeof zoom; 12 | }; 13 | export default _default; 14 | -------------------------------------------------------------------------------- /dist/example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 | 17 | 18 | 25 | 26 | -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ITreeConfig } from "./typings"; 2 | export declare const Treeviz: { 3 | create: typeof create; 4 | }; 5 | declare function create(userSettings: Partial): { 6 | refresh: (data: any, newSettings?: Partial) => void; 7 | clean: (keepConfig: boolean) => void; 8 | }; 9 | export {}; 10 | -------------------------------------------------------------------------------- /dist/initializeSVG.d.ts: -------------------------------------------------------------------------------- 1 | import { ITreeConfig } from "./typings"; 2 | export declare const initiliazeSVG: (treeConfig: ITreeConfig) => import("d3-selection").Selection; 3 | -------------------------------------------------------------------------------- /dist/links/draw-links.d.ts: -------------------------------------------------------------------------------- 1 | import { ITreeConfig } from "../typings"; 2 | interface ICoordinates { 3 | x: number; 4 | y: number; 5 | } 6 | export declare const generateLinkLayout: (s: ICoordinates, d: ICoordinates, treeConfig: ITreeConfig) => string; 7 | export {}; 8 | -------------------------------------------------------------------------------- /dist/links/link-enter.d.ts: -------------------------------------------------------------------------------- 1 | import { HierarchyPointNode } from "d3-hierarchy"; 2 | import { BaseType, Selection } from "d3-selection"; 3 | import { ExtendedHierarchyPointNode, ITreeConfig } from "../typings"; 4 | export declare const drawLinkEnter: (link: Selection, SVGGElement, {}>, settings: ITreeConfig, nodes: ExtendedHierarchyPointNode[], oldNodes: ExtendedHierarchyPointNode[]) => Selection, SVGGElement, {}>; 5 | -------------------------------------------------------------------------------- /dist/links/link-exit.d.ts: -------------------------------------------------------------------------------- 1 | import { HierarchyPointNode } from "d3-hierarchy"; 2 | import { BaseType, Selection } from "d3-selection"; 3 | import { ExtendedHierarchyPointNode, ITreeConfig } from "../typings"; 4 | export declare const drawLinkExit: (link: Selection, SVGGElement, {}>, settings: ITreeConfig, nodes: ExtendedHierarchyPointNode[], oldNodes: ExtendedHierarchyPointNode[]) => void; 5 | -------------------------------------------------------------------------------- /dist/links/link-update.d.ts: -------------------------------------------------------------------------------- 1 | import { HierarchyPointNode } from "d3-hierarchy"; 2 | import { Selection } from "d3-selection"; 3 | import { ITreeConfig } from "../typings"; 4 | export declare const drawLinkUpdate: (linkEnter: Selection, SVGGElement, {}>, link: Selection, SVGGElement, {}>, settings: ITreeConfig) => void; 5 | -------------------------------------------------------------------------------- /dist/nodes/node-enter.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseType, Selection } from "d3-selection"; 2 | import { ExtendedHierarchyPointNode, ITreeConfig } from "../typings"; 3 | export declare const drawNodeEnter: (node: Selection, settings: ITreeConfig, nodes: ExtendedHierarchyPointNode[], oldNodes: ExtendedHierarchyPointNode[]) => string & Selection; 4 | -------------------------------------------------------------------------------- /dist/nodes/node-exit.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseType, Selection } from "d3-selection"; 2 | import { ExtendedHierarchyPointNode, ITreeConfig } from "../typings"; 3 | export declare const drawNodeExit: (node: Selection, settings: ITreeConfig, nodes: ExtendedHierarchyPointNode[], oldNodes: ExtendedHierarchyPointNode[]) => void; 4 | -------------------------------------------------------------------------------- /dist/nodes/node-update.d.ts: -------------------------------------------------------------------------------- 1 | import { Selection } from "d3-selection"; 2 | import { ExtendedHierarchyPointNode, ITreeConfig } from "../typings"; 3 | export declare const drawNodeUpdate: (nodeEnter: Selection, node: Selection, settings: ITreeConfig) => void; 4 | -------------------------------------------------------------------------------- /dist/prepare-data.d.ts: -------------------------------------------------------------------------------- 1 | import { HierarchyNode } from "d3-hierarchy"; 2 | import { ITreeConfig } from "./typings"; 3 | export declare const generateNestedData: (data: any, treeConfig: ITreeConfig) => HierarchyNode; 4 | export declare const generateBasicTreemap: (treeConfig: ITreeConfig) => import("d3-hierarchy").TreeLayout; 5 | -------------------------------------------------------------------------------- /dist/treeviz.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | const e = document.createElement("link").relList; 3 | if (e && e.supports && e.supports("modulepreload")) 4 | return; 5 | for (const r of document.querySelectorAll('link[rel="modulepreload"]')) 6 | d(r); 7 | new MutationObserver((r) => { 8 | for (const i of r) 9 | if (i.type === "childList") 10 | for (const l of i.addedNodes) 11 | l.tagName === "LINK" && l.rel === "modulepreload" && d(l); 12 | }).observe(document, { childList: !0, subtree: !0 }); 13 | function a(r) { 14 | const i = {}; 15 | return r.integrity && (i.integrity = r.integrity), r.referrerPolicy && (i.referrerPolicy = r.referrerPolicy), r.crossOrigin === "use-credentials" ? i.credentials = "include" : r.crossOrigin === "anonymous" ? i.credentials = "omit" : i.credentials = "same-origin", i; 16 | } 17 | function d(r) { 18 | if (r.ep) 19 | return; 20 | r.ep = !0; 21 | const i = a(r); 22 | fetch(r.href, i); 23 | } 24 | })(); 25 | function s(t, e, a) { 26 | this.k = t, this.x = e, this.y = a; 27 | } 28 | s.prototype = { 29 | constructor: s, 30 | scale: function(t) { 31 | return t === 1 ? this : new s(this.k * t, this.x, this.y); 32 | }, 33 | translate: function(t, e) { 34 | return t === 0 & e === 0 ? this : new s(this.k, this.x + this.k * t, this.y + this.k * e); 35 | }, 36 | apply: function(t) { 37 | return [t[0] * this.k + this.x, t[1] * this.k + this.y]; 38 | }, 39 | applyX: function(t) { 40 | return t * this.k + this.x; 41 | }, 42 | applyY: function(t) { 43 | return t * this.k + this.y; 44 | }, 45 | invert: function(t) { 46 | return [(t[0] - this.x) / this.k, (t[1] - this.y) / this.k]; 47 | }, 48 | invertX: function(t) { 49 | return (t - this.x) / this.k; 50 | }, 51 | invertY: function(t) { 52 | return (t - this.y) / this.k; 53 | }, 54 | rescaleX: function(t) { 55 | return t.copy().domain(t.range().map(this.invertX, this).map(t.invert, t)); 56 | }, 57 | rescaleY: function(t) { 58 | return t.copy().domain(t.range().map(this.invertY, this).map(t.invert, t)); 59 | }, 60 | toString: function() { 61 | return "translate(" + this.x + "," + this.y + ") scale(" + this.k + ")"; 62 | } 63 | }; 64 | s.prototype; 65 | var h = [{ 66 | id: 1, 67 | text_1: "Chaos", 68 | text_2: "Void", 69 | father: null, 70 | color: "#FF5722" 71 | }, { 72 | id: 2, 73 | text_1: "Tartarus", 74 | text_2: "Abyss", 75 | father: 1, 76 | color: "#FFC107" 77 | }, { 78 | id: 3, 79 | text_1: "Gaia", 80 | text_2: "Earth", 81 | father: 1, 82 | color: "#8BC34A" 83 | }, { 84 | id: 4, 85 | text_1: "Eros", 86 | text_2: "Desire", 87 | father: 1, 88 | color: "#00BCD4" 89 | }], f = [{ 90 | id: 1, 91 | text_1: "Chaos", 92 | text_2: " Void", 93 | father: null, 94 | color: "#2196F3" 95 | }, { 96 | id: 2, 97 | text_1: "Tartarus", 98 | text_2: "Abyss", 99 | father: 1, 100 | color: "#F44336" 101 | }, { 102 | id: 3, 103 | text_1: "Gaia", 104 | text_2: "Earth", 105 | father: 1, 106 | color: "#673AB7" 107 | }, { 108 | id: 4, 109 | text_1: "Eros", 110 | text_2: "Desire", 111 | father: 1, 112 | color: "#009688" 113 | }, { 114 | id: 5, 115 | text_1: "Uranus", 116 | text_2: "Sky", 117 | father: 3, 118 | color: "#4CAF50" 119 | }, { 120 | id: 6, 121 | text_1: "Ourea", 122 | text_2: "Mountains", 123 | father: 3, 124 | color: "#FF9800" 125 | }], x = [{ 126 | id: 1, 127 | text_1: "Chaos", 128 | text_2: "Void", 129 | father: null, 130 | color: "#2196F3" 131 | }, { 132 | id: 2, 133 | text_1: "Tartarus", 134 | text_2: "Abyss", 135 | father: 1, 136 | color: "#F44336" 137 | }, { 138 | id: 3, 139 | text_1: "Gaia", 140 | text_2: "Earth", 141 | father: 1, 142 | color: "#673AB7" 143 | }, { 144 | id: 4, 145 | text_1: "Eros", 146 | text_2: "Desire", 147 | father: 1, 148 | color: "#009688" 149 | }, { 150 | id: 5, 151 | text_1: "Uranus", 152 | text_2: "Sky", 153 | father: 3, 154 | color: "#4CAF50" 155 | }, { 156 | id: 6, 157 | text_1: "Ourea", 158 | text_2: "Mountains", 159 | father: 3, 160 | color: "#FF9800" 161 | }, { 162 | id: 7, 163 | text_1: "Hermes", 164 | text_2: " Sky", 165 | father: 4, 166 | color: "#2196F3" 167 | }, { 168 | id: 8, 169 | text_1: "Aphrodite", 170 | text_2: "Love", 171 | father: 4, 172 | color: "#8BC34A" 173 | }, { 174 | id: 3.3, 175 | text_1: "Love", 176 | text_2: "Peace", 177 | father: 8, 178 | color: "#c72e99" 179 | }, { 180 | id: 4.1, 181 | text_1: "Hope", 182 | text_2: "Life", 183 | father: 8, 184 | color: "#2eecc7" 185 | }], c = (void 0)({ 186 | htmlId: "tree", 187 | idKey: "id", 188 | hasFlatData: !0, 189 | relationnalField: "father", 190 | nodeWidth: 120, 191 | hasPan: !0, 192 | hasZoom: !0, 193 | nodeHeight: 80, 194 | mainAxisNodeSpacing: 2, 195 | isHorizontal: !1, 196 | renderNode: function(e) { 197 | return "

" + e.data.text_1 + "

" + e.data.text_2 + "

"; 198 | }, 199 | linkWidth: function(e) { 200 | return 5; 201 | }, 202 | linkShape: "curve", 203 | linkColor: function(e) { 204 | return e.linkColor || "#B0BEC5"; 205 | }, 206 | onNodeClick: function(e) { 207 | return console.log(e); 208 | } 209 | }); 210 | c.refresh(h); 211 | var u = !0, n = document.querySelector("#add"), o = document.querySelector("#remove"), _ = document.querySelector("#doTasks"); 212 | n.addEventListener("click", function() { 213 | console.log("addButton clicked"), u ? c.refresh(f) : c.refresh(x), u = !1; 214 | }); 215 | o.addEventListener("click", function() { 216 | console.log("removeButton clicked"), c.refresh(h); 217 | }); 218 | _.addEventListener("click", function() { 219 | n.click(), o.click(), n.click(), o.click(), o.click(), n.click(), o.click(), n.click(), n.click(), o.click(), o.click(); 220 | }); 221 | -------------------------------------------------------------------------------- /dist/typings.d.ts: -------------------------------------------------------------------------------- 1 | import { HierarchyPointNode } from "d3-hierarchy"; 2 | export interface ITreeConfig { 3 | htmlId: string; 4 | idKey: string; 5 | relationnalField: string; 6 | hasFlatData: boolean; 7 | nodeWidth: number; 8 | nodeHeight: number; 9 | mainAxisNodeSpacing: number | "auto"; 10 | renderNode: (node: any) => string | null; 11 | linkShape?: "quadraticBeziers" | "curve" | "orthogonal" | ""; 12 | linkColor: (node: any) => string; 13 | linkWidth: (node: any) => number; 14 | onNodeClick: (node: any) => void; 15 | onNodeMouseEnter: (node: any) => void; 16 | onNodeMouseLeave: (node: any) => void; 17 | isHorizontal: boolean; 18 | hasPan: boolean; 19 | hasZoom: boolean; 20 | duration: number; 21 | marginTop: number; 22 | marginBottom: number; 23 | marginLeft: number; 24 | marginRight: number; 25 | secondaryAxisNodeSpacing: number; 26 | } 27 | export interface ExtendedHierarchyPointNode extends HierarchyPointNode<{}> { 28 | x0?: number; 29 | y0?: number; 30 | } 31 | -------------------------------------------------------------------------------- /dist/utils.d.ts: -------------------------------------------------------------------------------- 1 | import { ExtendedHierarchyPointNode, ITreeConfig } from "./typings"; 2 | export declare const getAreaSize: (htmlId: string) => { 3 | areaWidth: number; 4 | areaHeight: number; 5 | }; 6 | type Result = ExtendedHierarchyPointNode & { 7 | x0: number; 8 | y0: number; 9 | }; 10 | export declare const getFirstDisplayedAncestor: (ghostNodes: ExtendedHierarchyPointNode[], viewableNodes: ExtendedHierarchyPointNode[], id: string) => Result; 11 | export declare const setNodeLocation: (xPosition: number, yPosition: number, settings: ITreeConfig) => string; 12 | export declare class RefreshQueue { 13 | private static queue; 14 | private static runner; 15 | private static runnerSpeed; 16 | private static readonly extraDelayBetweenCallbacks; 17 | private static showQueueLog; 18 | static add(duration: number, callback: () => any): void; 19 | private static runnerFunction; 20 | private static log; 21 | } 22 | export {}; 23 | -------------------------------------------------------------------------------- /example/example.ts: -------------------------------------------------------------------------------- 1 | import { Treeviz } from "../src"; 2 | 3 | var data_1 = [ 4 | { 5 | id: 1, 6 | text_1: "Chaos", 7 | text_2: "Void", 8 | father: null, 9 | color: "#FF5722", 10 | }, 11 | { 12 | id: 2, 13 | text_1: "Tartarus", 14 | text_2: "Abyss", 15 | father: 1, 16 | color: "#FFC107", 17 | }, 18 | { 19 | id: 3, 20 | text_1: "Gaia", 21 | text_2: "Earth", 22 | father: 1, 23 | color: "#8BC34A", 24 | }, 25 | { 26 | id: 4, 27 | text_1: "Eros", 28 | text_2: "Desire", 29 | father: 1, 30 | color: "#00BCD4", 31 | }, 32 | ]; 33 | var data_2 = [ 34 | { 35 | id: 1, 36 | text_1: "Chaos", 37 | text_2: " Void", 38 | father: null, 39 | color: "#2196F3", 40 | }, 41 | { 42 | id: 2, 43 | text_1: "Tartarus", 44 | text_2: "Abyss", 45 | father: 1, 46 | color: "#F44336", 47 | }, 48 | { 49 | id: 3, 50 | text_1: "Gaia", 51 | text_2: "Earth", 52 | father: 1, 53 | color: "#673AB7", 54 | }, 55 | { 56 | id: 4, 57 | text_1: "Eros", 58 | text_2: "Desire", 59 | father: 1, 60 | color: "#009688", 61 | }, 62 | { 63 | id: 5, 64 | text_1: "Uranus", 65 | text_2: "Sky", 66 | father: 3, 67 | color: "#4CAF50", 68 | }, 69 | { 70 | id: 6, 71 | text_1: "Ourea", 72 | text_2: "Mountains", 73 | father: 3, 74 | color: "#FF9800", 75 | }, 76 | ]; 77 | var data_3 = [ 78 | { 79 | id: 1, 80 | text_1: "Chaos", 81 | text_2: "Void", 82 | father: null, 83 | color: "#2196F3", 84 | }, 85 | { 86 | id: 2, 87 | text_1: "Tartarus", 88 | text_2: "Abyss", 89 | father: 1, 90 | color: "#F44336", 91 | }, 92 | { 93 | id: 3, 94 | text_1: "Gaia", 95 | text_2: "Earth", 96 | father: 1, 97 | color: "#673AB7", 98 | }, 99 | { 100 | id: 4, 101 | text_1: "Eros", 102 | text_2: "Desire", 103 | father: 1, 104 | color: "#009688", 105 | }, 106 | { 107 | id: 5, 108 | text_1: "Uranus", 109 | text_2: "Sky", 110 | father: 3, 111 | color: "#4CAF50", 112 | }, 113 | { 114 | id: 6, 115 | text_1: "Ourea", 116 | text_2: "Mountains", 117 | father: 3, 118 | color: "#FF9800", 119 | }, 120 | { 121 | id: 7, 122 | text_1: "Hermes", 123 | text_2: " Sky", 124 | father: 4, 125 | color: "#2196F3", 126 | }, 127 | { 128 | id: 8, 129 | text_1: "Aphrodite", 130 | text_2: "Love", 131 | father: 4, 132 | color: "#8BC34A", 133 | }, 134 | { 135 | id: 3.3, 136 | text_1: "Love", 137 | text_2: "Peace", 138 | father: 8, 139 | color: "#c72e99", 140 | }, 141 | { 142 | id: 4.1, 143 | text_1: "Hope", 144 | text_2: "Life", 145 | father: 8, 146 | color: "#2eecc7", 147 | }, 148 | ]; 149 | 150 | var myTree = Treeviz.create({ 151 | data: data_1, // for Typescript projects only. 152 | htmlId: "tree", 153 | idKey: "id", 154 | hasFlatData: true, 155 | relationnalField: "father", 156 | nodeWidth: 120, 157 | hasPan: true, 158 | hasZoom: true, 159 | nodeHeight: 80, 160 | mainAxisNodeSpacing: 2, 161 | isHorizontal: false, 162 | renderNode: function renderNode(node) { 163 | return ( 164 | "

" + 171 | node.data.text_1 + 172 | "

" + 173 | node.data.text_2 + 174 | "

" 175 | ); 176 | }, 177 | linkWidth: (node) => { 178 | return node.data.id * 2; 179 | }, 180 | linkShape: "curve", 181 | linkColor: () => `#B0BEC5`, 182 | onNodeClick: (node) => { 183 | console.log(node.data); 184 | }, 185 | onNodeMouseEnter: (node) => { 186 | console.log(node.data); 187 | }, 188 | }); 189 | myTree.refresh(data_1); 190 | 191 | var toggle = true; 192 | var addButton = document.querySelector("#add"); 193 | var removeButton = document.querySelector("#remove"); 194 | var doTasksButton = document.querySelector("#doTasks"); 195 | addButton?.addEventListener("click", function () { 196 | console.log("addButton clicked"); 197 | toggle ? myTree.refresh(data_2) : myTree.refresh(data_3); 198 | toggle = false; 199 | }); 200 | removeButton?.addEventListener("click", function () { 201 | console.log("removeButton clicked"); 202 | myTree.refresh(data_1); 203 | }); 204 | doTasksButton?.addEventListener("click", function () { 205 | addButton?.click(); 206 | removeButton?.click(); 207 | addButton?.click(); 208 | removeButton?.click(); 209 | removeButton?.click(); 210 | addButton?.click(); 211 | removeButton?.click(); 212 | addButton?.click(); 213 | addButton?.click(); 214 | removeButton?.click(); 215 | removeButton?.click(); 216 | }); 217 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | 11 | 17 | 23 |

24 | 25 | 26 | 34 | 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "treeviz", 3 | "version": "3.0.1", 4 | "type": "module", 5 | "description": "Library which aims to represent trees for data visualization", 6 | "license": "MIT", 7 | "main": "./dist/treeviz.js", 8 | "types": "./dist/index.d.ts", 9 | "keywords": [ 10 | "d3", 11 | "data", 12 | "visualization", 13 | "tree", 14 | "decision", 15 | "hierarchy", 16 | "dynamic" 17 | ], 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/PierreCapo/treeviz" 21 | }, 22 | "scripts": { 23 | "dev": "vite", 24 | "build": "tsc && vite build", 25 | "preview": "vite preview" 26 | }, 27 | "devDependencies": { 28 | "@types/node": "^20.10.3", 29 | "typescript": "^5.3.2", 30 | "vite": "^5.0.6", 31 | "vite-plugin-dts": "^3.6.4" 32 | }, 33 | "dependencies": { 34 | "@types/d3-hierarchy": "^3.1.6", 35 | "@types/d3-selection": "^3.0.10", 36 | "@types/d3-transition": "^3.0.8", 37 | "@types/d3-zoom": "^3.0.8", 38 | "d3-hierarchy": "^3.1.2", 39 | "d3-selection": "^3.0.0", 40 | "d3-transition": "^3.0.1", 41 | "d3-zoom": "^3.0.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/d3.ts: -------------------------------------------------------------------------------- 1 | import { hierarchy, stratify, tree, treemap } from "d3-hierarchy"; 2 | import { select, selectAll } from "d3-selection"; 3 | import { zoom } from "d3-zoom"; 4 | 5 | export default { 6 | hierarchy, 7 | stratify, 8 | tree, 9 | treemap, 10 | select, 11 | selectAll, 12 | zoom, 13 | }; 14 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { HierarchyPointNode } from "d3-hierarchy"; 2 | import { BaseType, Selection } from "d3-selection"; 3 | import { initiliazeSVG } from "./initializeSVG"; 4 | import { drawLinkEnter } from "./links/link-enter"; 5 | import { drawLinkExit } from "./links/link-exit"; 6 | import { drawLinkUpdate } from "./links/link-update"; 7 | import { drawNodeEnter } from "./nodes/node-enter"; 8 | import { drawNodeExit } from "./nodes/node-exit"; 9 | import { drawNodeUpdate } from "./nodes/node-update"; 10 | import { generateBasicTreemap, generateNestedData } from "./prepare-data"; 11 | import { ExtendedHierarchyPointNode, ITreeConfig } from "./typings"; 12 | import { RefreshQueue } from "./utils"; 13 | 14 | export const Treeviz = { 15 | create, 16 | }; 17 | 18 | function create(userSettings: Partial>) { 19 | const defaultSettings: ITreeConfig = { 20 | data: [], 21 | htmlId: "", 22 | idKey: "id", 23 | relationnalField: "father", 24 | hasFlatData: true, 25 | nodeWidth: 160, 26 | nodeHeight: 100, 27 | mainAxisNodeSpacing: 300, 28 | renderNode: () => "Node", 29 | linkColor: () => "#ffcc80", 30 | linkWidth: () => 10, 31 | linkShape: "quadraticBeziers", 32 | isHorizontal: true, 33 | hasPan: false, 34 | hasZoom: false, 35 | duration: 600, 36 | onNodeClick: () => undefined, 37 | onNodeMouseEnter: () => undefined, 38 | onNodeMouseLeave: () => undefined, 39 | marginBottom: 0, 40 | marginLeft: 0, 41 | marginRight: 0, 42 | marginTop: 0, 43 | secondaryAxisNodeSpacing: 1.25, 44 | }; 45 | 46 | // @ts-ignore 47 | let settings: ITreeConfig = { 48 | ...defaultSettings, 49 | ...userSettings, 50 | }; 51 | 52 | let oldNodes: ExtendedHierarchyPointNode[] = []; 53 | 54 | function draw( 55 | svg: Selection, 56 | computedTree: HierarchyPointNode<{}> 57 | ) { 58 | const nodes = computedTree.descendants() as ExtendedHierarchyPointNode[]; 59 | 60 | const links = computedTree.descendants().slice(1); 61 | 62 | const { mainAxisNodeSpacing: mainAxisNodeSpacing } = settings; 63 | if (mainAxisNodeSpacing !== "auto") { 64 | // Normalize for fixed-depth. 65 | nodes.forEach((d) => { 66 | d.y = d.depth * settings.nodeWidth * mainAxisNodeSpacing; 67 | }); 68 | } 69 | 70 | nodes.forEach((currentNode: ExtendedHierarchyPointNode) => { 71 | const currentNodeOldPosition = oldNodes.find( 72 | (node) => node.id === currentNode.id 73 | ); 74 | currentNode.x0 = currentNodeOldPosition 75 | ? currentNodeOldPosition.x0 76 | : currentNode.x; 77 | currentNode.y0 = currentNodeOldPosition 78 | ? currentNodeOldPosition.y0 79 | : currentNode.y; 80 | }); 81 | 82 | // ****************** Nodes section *************************** 83 | const node: Selection< 84 | BaseType, 85 | ExtendedHierarchyPointNode, 86 | SVGGElement, 87 | {} 88 | > = svg.selectAll("g.node").data(nodes, (d: any) => { 89 | return d[settings.idKey]; 90 | }); 91 | 92 | const nodeEnter = drawNodeEnter(node, settings, nodes, oldNodes); 93 | //@ts-ignore 94 | drawNodeUpdate(nodeEnter, node, settings); 95 | drawNodeExit(node, settings, nodes, oldNodes); 96 | 97 | // ****************** links section *************************** 98 | 99 | const link = svg.selectAll("path.link").data(links, (d: any) => { 100 | return d.id; 101 | }); 102 | 103 | const linkEnter = drawLinkEnter(link, settings, nodes, oldNodes); 104 | // @ts-ignore 105 | drawLinkUpdate(linkEnter, link, settings); 106 | drawLinkExit(link, settings, nodes, oldNodes); 107 | 108 | oldNodes = [...nodes]; 109 | } 110 | 111 | function refresh(data: any, newSettings?: Partial) { 112 | RefreshQueue.add(settings.duration, () => { 113 | if (newSettings) { 114 | settings = { ...settings, ...newSettings }; 115 | } 116 | const nestedData = generateNestedData(data, settings); 117 | const treemap = generateBasicTreemap(settings); 118 | const computedTree = treemap(nestedData); // mutation 119 | 120 | // @ts-ignore 121 | draw(svg, computedTree); 122 | }); 123 | } 124 | 125 | function clean(keepConfig: boolean) { 126 | const myNode = keepConfig 127 | ? document.querySelector(`#${settings.htmlId} svg g`) 128 | : document.querySelector(`#${settings.htmlId}`); 129 | if (myNode) { 130 | while (myNode.firstChild) { 131 | myNode.removeChild(myNode.firstChild); 132 | } 133 | } 134 | oldNodes = []; 135 | } 136 | 137 | const treeObject = { refresh, clean }; 138 | 139 | const svg = initiliazeSVG(settings); 140 | return treeObject; 141 | } 142 | -------------------------------------------------------------------------------- /src/initializeSVG.ts: -------------------------------------------------------------------------------- 1 | import d3 from "./d3"; 2 | import { ITreeConfig } from "./typings"; 3 | import { getAreaSize } from "./utils"; 4 | 5 | export const initiliazeSVG = (treeConfig: ITreeConfig) => { 6 | const { 7 | htmlId, 8 | isHorizontal, 9 | hasPan, 10 | hasZoom, 11 | mainAxisNodeSpacing, 12 | nodeHeight, 13 | nodeWidth, 14 | marginBottom, 15 | marginLeft, 16 | marginRight, 17 | marginTop, 18 | } = treeConfig; 19 | const margin = { 20 | top: marginTop, 21 | right: marginRight, 22 | bottom: marginBottom, 23 | left: marginLeft, 24 | }; 25 | const { areaHeight, areaWidth } = getAreaSize(treeConfig.htmlId); 26 | const width = areaWidth - margin.left - margin.right; 27 | const height = areaHeight - margin.top - margin.bottom; 28 | 29 | const svg = d3 30 | .select("#" + htmlId) 31 | .append("svg") 32 | .attr("width", areaWidth) 33 | .attr("height", areaHeight); 34 | 35 | // Create a G container and move it according to the Zoom Behavior attached to the main