All Projects → benyasin → D3 Org Tree

benyasin / D3 Org Tree

Licence: mit
A highly customizable org tree built with d3.js v5

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to D3 Org Tree

Ngx Charts
📊 Declarative Charting Framework for Angular
Stars: ✭ 4,057 (+3622.02%)
Mutual labels:  svg, d3js
D3tutorial
📊📈 A D3 v6 tutorial - interactive bar chart and multiple coordinated views (MCV)
Stars: ✭ 163 (+49.54%)
Mutual labels:  svg, d3js
Flowchart
svg实现流程图绘制,导入导出json [正在重构项目flowchart-vue],地址:
Stars: ✭ 350 (+221.1%)
Mutual labels:  svg, d3js
Svg essentials
《SVG精髓》 阅读笔记
Stars: ✭ 59 (-45.87%)
Mutual labels:  svg, d3js
Vue D3 Workshop
Workshop content material and excercises for Suncoast Developers
Stars: ✭ 63 (-42.2%)
Mutual labels:  svg, d3js
Reaviz
📊 Data visualization library for React based on D3
Stars: ✭ 1,141 (+946.79%)
Mutual labels:  svg, d3js
D3
This is the repository for my course, Learning Data Visualization with D3.js on LinkedIn Learning and Lynda.com.
Stars: ✭ 64 (-41.28%)
Mutual labels:  svg, d3js
Nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
Stars: ✭ 9,550 (+8661.47%)
Mutual labels:  svg, d3js
Robopaint
The software for your friendly painting robot kit!
Stars: ✭ 105 (-3.67%)
Mutual labels:  svg
Nimsvg
Nim-based DSL allowing to generate SVG files and GIF animations.
Stars: ✭ 107 (-1.83%)
Mutual labels:  svg
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: ✭ 105 (-3.67%)
Mutual labels:  svg
React Native Responsive Linechart
A customizable and responsive line or area chart for react-native
Stars: ✭ 105 (-3.67%)
Mutual labels:  svg
D3js doc
D3js中文文档 D3中文 📊 📈 🎉
Stars: ✭ 1,599 (+1366.97%)
Mutual labels:  d3js
Rxviz
Rx Visualizer - Animated playground for Rx Observables
Stars: ✭ 1,471 (+1249.54%)
Mutual labels:  svg
Protodot
transforming your .proto files into .dot files (and .svg, .png if you happen to have graphviz installed)
Stars: ✭ 107 (-1.83%)
Mutual labels:  svg
Conf
Landing page for event React Conf Brazil
Stars: ✭ 104 (-4.59%)
Mutual labels:  svg
Particles
A particle simulation engine based on a port of d3-force
Stars: ✭ 104 (-4.59%)
Mutual labels:  d3js
Flowmaker
flowmaker: JS to SVG flowchart generation extension for Vscode in realtime written in typescript and also download the SVG through local node server. Extension:
Stars: ✭ 108 (-0.92%)
Mutual labels:  svg
Echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser
Stars: ✭ 49,119 (+44963.3%)
Mutual labels:  svg
Wavedrom
🌊 Digital timing diagram rendering engine
Stars: ✭ 1,668 (+1430.28%)
Mutual labels:  svg

GitHub stars GitHub issues GitHub forks GitHub last commit

Futures

d3-org-tree is highly customizable tree built with d3.js v5 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-rightright-to-lefttop-to-bottombottom-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-rightright-to-lefttop-to-bottombottom-to-top
transformStraightLink(straightLink) function, change the the link style to straight line, the passed value can be falsetrue
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.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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].