benyasin / d3-org-tree Goto Github PK

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

• Vue integration demo

npm i d3-org-tree

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
   }]

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

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!