Dagre D3 Graph Renderer built on DagreD3
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
)
.nodes {
fill: darkgray;
}
.nodes text {
fill: white;
}
path {
stroke: black;
fill: black;
stroke-width: 1.5px;
}
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) |
{
id: string,
label: string,
class?: string,
labelType?: 'html' | 'svg' | 'string',
config?: object
}
{
source: any,
target: any,
class?: string,
label?: string,
config?: object
}
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}>
)
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}>
dagre-d3-react is released under the MIT license.