dagre-d3-react
Dagre D3 Graph Renderer built on DagreD3
Browsers
- support IE11+, Chrome, Firefox, Safari
Screenshots
Install
Usage
Update
rankdir prop has been updated in version 0.2.0
It has now been replaced with config
and the new options can be found here
import DagreGraph from 'dagre-d3-react'
ReactDOM.render(
<div>
<DagreGraph
nodes={nodes}
links={links}
config={{
rankdir: 'LR',
align: 'UL',
ranker: 'tight-tree'
}}
width='500'
height='500'
animate={1000}
shape='circle'
fitBoundaries
zoomable
onNodeClick={e => console.log(e)}
onRelationshipClick={e => console.log(e)}
/>
</div>,
container
)
Example CSS Styles
.nodes {
fill: darkgray;
}
.nodes text {
fill: white;
}
path {
stroke: black;
fill: black;
stroke-width: 1.5px;
}
API
props
name | type | default | description |
---|---|---|---|
nodes | array | undefined | List of node objects {label:'', id:'', class: ''} |
links | array | undefined | List of link objects {source: '', target: '', class: '', label: ''} |
zoomable | boolean | false | Allows scroll to zoom on graph |
fitBoundaries | boolean | false | Autosizes graph to fit container |
height | string | 500 | Default height of svg |
width | string | 500 | Default width of svg |
config | object | See configuration options here | |
animate | number | 1000 | Enables animation with duration in milliseconds |
shape | string | circle | SVG node shape: 'rect' | 'circle' | 'ellipse' |
className | string | Assign custom class to svg element | |
onNodeClick | Function | Callback on node click | |
onRelationshipClick | Function | Callback relationship click (specifically the label) |
Node Object
{
id: string,
label: string,
class?: string,
labelType?: 'html' | 'svg' | 'string',
config?: object
}
Link Object
{
source: any,
target: any,
class?: string,
label?: string,
config?: object
}
Neo4j Example
let data = await axios.post('/commit', {statements: [
{statement: "match (a)-[r1]->(b) return a, r1, b", resultDataContents: ['graph']}
]
})
let dagreData = {
nodes: [],
links: []
}
data.data.results[0].data.forEach(row => {
row.graph.nodes.forEach(node => dagreData.nodes.push(row))
row.graph.relationships.forEach(node => dagreData.links.push(row))
})
return (
<DagreGraph nodes={dagreData.nodes} links={dagreData.links}>
)
Node Render HTML
let data = {
nodes: [
{
id: "1",
label: "<h3>Node 1</h3>",
labelType: "html"
},
{
id: "2",
label: "<h3>Node 2</h3>",
labelType: "html",
config: {
style: 'fill: #afa'
}
}
],
links: [
{
source: '1',
target: '2',
label: 'TO',
config: {
arrowheadStyle: 'display: none',
curve: d3.curveBasis,
style: 'fill:none'
}
},
]
}
<DagreGraph nodes={dagreData.nodes} links={dagreData.links}>
License
dagre-d3-react is released under the MIT license.