benyasin / D3 Org Tree
Licence: mit
A highly customizable org tree built with d3.js v5
Stars: ✭ 109
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
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
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
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
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
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, anddelete
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 todisplay 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
andremove
event
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.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].