roh-dagre-module
TypeScript icon, indicating that this package has built-in type declarations

0.2.2 • Public • Published

dagre-d3-react

Dagre D3 Graph Renderer built on DagreD3

Browsers

  • support IE11+, Chrome, Firefox, Safari

Screenshots

Install

dagre-d3-react

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

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

  {
    idstring,
    labelstring,
    class?: string,
    labelType?: 'html' | 'svg' | 'string',
    config?: object
  }

Link Object

  {
    sourceany,
    targetany,
    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}>

License

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

Package Sidebar

Install

npm i roh-dagre-module

Weekly Downloads

4

Version

0.2.2

License

MIT

Unpacked Size

6.28 MB

Total Files

10

Last publish

Collaborators

  • nucknuck