https://github.com/futuresea-dev/dagre-d3-react
dagre-d3-react
https://github.com/futuresea-dev/dagre-d3-react
javascript react typescript
Last synced: 4 months ago
JSON representation
dagre-d3-react
- Host: GitHub
- URL: https://github.com/futuresea-dev/dagre-d3-react
- Owner: futuresea-dev
- License: mit
- Created: 2022-03-18T00:35:15.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-18T00:36:02.000Z (about 4 years ago)
- Last Synced: 2024-12-29T11:44:45.547Z (over 1 year ago)
- Topics: javascript, react, typescript
- Language: TypeScript
- Homepage:
- Size: 740 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# dagre-d3-react
Dagre D3 Graph Renderer built on [DagreD3](https://github.com/dagrejs/dagre-d3)
## Browsers
- support IE11+, Chrome, Firefox, Safari
## Screenshots
## Install
[](https://www.npmjs.com/package/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](https://github.com/dagrejs/dagre/wiki#configuring-the-layout)
```jsx
import DagreGraph from 'dagre-d3-react'
ReactDOM.render(
console.log(e)}
onRelationshipClick={e => console.log(e)}
/>
,
container
)
```
## Example CSS Styles
```css
.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
```typescript
{
id: string,
label: string,
class?: string,
labelType?: 'html' | 'svg' | 'string',
config?: object
}
```
### Link Object
```typescript
{
source: any,
target: any,
class?: string,
label?: string,
config?: object
}
```
## Neo4j Example
```javascript
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 (
)
```
## Node Render HTML
```javascript
let data = {
nodes: [
{
id: "1",
label: "
Node 1
",
labelType: "html"
},
{
id: "2",
label: "Node 2
",
labelType: "html",
config: {
style: 'fill: #afa'
}
}
],
links: [
{
source: '1',
target: '2',
label: 'TO',
config: {
arrowheadStyle: 'display: none',
curve: d3.curveBasis,
style: 'fill:none'
}
},
]
}
```
## License
dagre-d3-react is released under the MIT license.