dagre-d3-react

Dagre D3 Graph Renderer built on DagreD3

This is under active development as of 9/10/19
There may be breaking changes and I will update the README accordingly.

Browsers

support IE11+, Chrome, Firefox, Safari

Screenshots

Install

Usage

import DagreGraph from 'dagre-d3-react'

ReactDOM.render(
	<div>
		<DagreGraph
			nodes={nodes}
			links={links}
			rankdir='LR'
			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
rankdir	string	TB	Layout direction of graph: 'TB' \| 'BT' \| 'LR' \| 'RL'
animate	number	1000	Enables animation with duration in milliseconds
shape	string	rect	SVG node shape: 'rect' \| 'circle' \| 'ellipse'
className	string		Assign custom class to svg element
onNodeClick	Function		Callback on node click
onNodeRightClick	Function		Callback on node right click
onNodeDoubleClick	Function		Callback on node double click
onRelationshipClick	Function		Callback relationship click (specifically the label)
onRelationshipRightClick	Function		Callback relationship right click (specifically the label)
onRelationshipDoubleClick	Function		Callback relationship double click (specifically the label)

Node Object

{
  id: string,
	label: string,
	class?: string,
	labelType?: 'html' | 'svg' | 'string'
}

Link Object

{
  source: any
	target: any
	class?: string
  label?: string
}

Installation

npm install --save dagre-d3-react

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"
    }
  ],
  links: [
    { source: '1', target: '2', label: 'TO' },
  ]
}

<DagreGraph nodes={dagreData.nodes} links={dagreData.links}>

License

dagre-d3-react is released under the MIT license.

crstp/dagre-d3-react