0.0.2 • Published 11 months ago
graphvisor v0.0.2
GraphVisor
GraphVisor is a React component that facilitates the visualization of interactive, customizable, directed, and weighted graphs.
Examples
Check out the interactive examples on the component's Storybook page.
API
GraphVisor
| Property | Description | Type | Default |
|---|---|---|---|
| data | The graph data object | {nodes: node[], links: link[]} | / |
| nodeType | The type of the node: circle or image. If it's an image, the image source must be provided in each node object | "image" / "circle" | "circle" |
| nodeSize | The size of the nodes | number | 25 |
| directedLinks | Specifies whether the link (edge) is directed or not | boolean | true |
| enableDrag | Specifies whether the nodes are draggable or not | boolean | true |
| distance | The distance between two nodes, or the length of the link | number | 200 |
| color | The color applied to the nodes and links | string | black |
| nodeClassName | The class name applied to all nodes | string | / |
| linkClassName | The class name applied to all links | string | / |
| linkLabelClassName | The class name applied to all link labels | string | / |
| titleClassName | The class name applied to all node titles | string | / |
| onClick | The function to be called when a node is clicked | (node) => void; | / |
Nodes
| Property | Description | Type | Default |
|---|---|---|---|
| id | The unique identifier of the node | string / number | / |
| label | The text shown under the node | string | / |
| image | The source of the image of the node (only used if option.type is 'image') | string | null |
| className | The class name given to the node | string | null |
| titleClassName | The class name given to the label of the node | string | null |
Links
| Property | Description | Type | Default |
|---|---|---|---|
| source | The ID of the source node | string / number | / |
| target | The ID of the target node | string / number | / |
| label | The label shown on the link | string | null |
| labelClassName | The class name given to the label of the link | string | null |
| linkClassName | The class name given to the link | string | null |
| color | The color of the link | string | by default, it uses the options.color |