Futures

d3-org-tree is highly customizable tree built with d3.js v6 that can run in modern browser like Chrome, Edge, Firefox and Safari. Except d3.js, it does not have any third-party dependencies.

Some d3-org-tree features:

• custom node style, including svg and pure html dom through template
• customize the node behavior, including expand child nodes, add child nodes, and delete it
• customize the current node highlight style and can manually change the current node
• pre-set or dynamically change the layout orientation, link style, and whether to display arrows
• pre-set the width/height of the svg container and the margin offset of the content
• pre-set transform animation duration
• customize callback function on node click,add and remove event

Demo

• Vue integration demo

Installing

npm i d3-org-tree

Usage

import OrgTree from "d3-org-tree";

const orgTree = new OrgTree()
orgTree.container('body') //dom element
       .data(/**{}*/)     //data json array, example as below
       .svgWidth(800)
       .svgHeight(600)
       .highlight({
            "borderWidth": 1,
            "borderRadius": 15,
            "borderColor": {"red": 50,"green": 255,"blue": 30,"alpha": 1},
            "backgroundColor": {"red": 20,"green": 100,"blue": 40,"alpha": 1}
        })
       .initialZoom(.3)
       .onNodeClick(d => {
            console.log(d + " node clicked")
        })
        .onNodeAdd(d => {
            console.log(d + " node added")
            orgTree.addNode(/*added node json*/)
        })
        .onNodeRemove(d => {
            console.log(d + " node removed")
            orgTree.remove(/*removed nodeId*/)
        })
       .render()

data example:

[  {
     "nodeId": "O-1",
     "parentNodeId": null,
     "width": 325,
     "height": 139,
     "borderWidth": 1,
     "borderRadius": 15,
     "borderColor": {
       "red": 15,
       "green": 140,
       "blue": 121,
       "alpha": 0.5
     },
     "backgroundColor": {
       "red": 0,
       "green": 81,
       "blue": 90,
       "alpha": 0.5
     },
     "template": "<div class=\"domStyle\">\n<span>Ben</span></div>",
     "expanded": true,
     "added": false,
     "removed": false
   },
   {
     "nodeId": "O-2",
     "parentNodeId": "O-1",
     "width": 319,
     "height": 134,
     "borderWidth": 1,
     "borderRadius": 15,
     "borderColor": {
       "red": 15,
       "green": 140,
       "blue": 121,
       "alpha": 0.5
     },
     "backgroundColor": {
       "red": 0,
       "green": 81,
       "blue": 90,
       "alpha": 0.5
     },
     "template": "<div class=\"domStyle\"><span>Honey</span></div>",
     "expanded": true,
     "added": true,
     "removed": false
   }]

API

| Properties | Usage | | --- | --- | | svgWidth | number, the svg width, and will be 100% of the container's width if not set| | svgHeight | number, the svg height, and will be 600 if not set | | container | string, the svg dom selector, can be a class name or dom tag name, the default value is body| | backgroundColor | string, background color of the svg container, the default value is #fafafa | | data | array, all nodes data definition, the data struct can be seen above | | highlight | object, define highlight styles of the current node | | current | string, mark the current chosen node | | duration | number, the transition duration, the default value is 600 | | strokeWidth | number, the stroke width of node, the default value is 3 | | linkColor | object, the rgba color object of link, the default value is 3 | | linkWidth | number, the stroke width of link, the default value is 5 | | initialZoom | number, the initial zoom scale, the default value is 0.4 | | orientation | string, the layout orientation, which value is one of left-to-right、right-to-left、top-to-bottom、bottom-to-top, and the default one is right-to-left | | collapsible | boolean, show the expand/collapse button, the default value is false, if its value is false, all expanded property in each data object will not take in effect | | displayArrow | boolean, show the link arrow, the default value is true | | straightLink | boolean, display the link with straight line, the default value is false, transform it to curve line when set the property to true|

| Method | Usage | | --- | --- | | onNodeClick(nodeId) | function, callback after node clicked | | onNodeAdd(nodeId) | function, callback after the add button clicked | | onNodeRemove(nodeId) | function,callback after the remove button clicked |

| Callback | Usage | | --- | --- | | transformLayout(orientation) | function, change the the layout orientation, the passed value can be left-to-right、right-to-left、top-to-bottom、bottom-to-top | | transformStraightLink(straightLink) | function, change the the link style to straight line, the passed value can be false、true | | toggleArrow(display) | function, toggle visibility of link arrow, default value is false | | addNode(nodeJson) | function, add a children node under a parent node you clicked | | removeNode(nodeId) | function, remove a node by the nodeId |

Changelog

0.0.9 Changes:

• Make it compatible with the latest version of d3

0.0.8 Changes:

• Fixed bugs for svg element position

0.0.7 Changes:

• Added an exported switch property for controls of the expand and collapse button

0.0.6 Changes:

• Re-adjusted position of the add and remove buttons
• Add expand and collapse buttons to manually show and hide sub-nodes

0.0.5 Changes:

• Added function for transform link line style
• Set default link style as curve line

0.0.4 Changes:

• Added control for arrows visibility
• optimized link position

0.0.3 Changes:

• Fixed node distance bug
• Added a vue integrated demo

0.0.2 Changes:

• Added layout orientation support
• Completed documentation

0.0.1 Changes:

• The initial version first publish to npm library

Contributing

If the existing component doesn't meet your needs, fork the project, implement the future and an example using it, send us a pull request, for consideration for inclusion in the project.

If you'd like to contribute consistently, show me what you've got with some good pull requests!