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}
      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,
			  style: 'fill:none'
      }
    },
  ]
}

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

License

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