dagred3-react2
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.5 • 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}
    			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
    )

    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

      {
        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.

    Install

    npm i dagred3-react2

    DownloadsWeekly Downloads

    1

    Version

    0.2.5

    License

    MIT

    Unpacked Size

    6.28 MB

    Total Files

    10

    Last publish

    Collaborators

    • fir3st