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 |