Dagre-d3-react NPM

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}
			options={{
				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

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
      }
    },
  ]
}

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