Skip to content

πŸ“ˆ A highly customizable org tree built with d3.js

License

Notifications You must be signed in to change notification settings

benyasin/d3-org-tree

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

42 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

GitHub stars GitHub issues GitHub forks GitHub last commit

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

tree

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!