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!