Data utilities
Umbrella package
@visx/network
A simple package to visualize a network or graph layout. Does not currently handle network layout.
Example Usage
import { Graph, DefaultLink, DefaultNode } from '@visx/network';
const nodes = [
{ x: 50, y: 20 },
{ x: 200, y: 300 },
{ x: 300, y: 40 },
];
const dataSample = {
nodes,
links: [
{ source: nodes[0], target: nodes[1] },
{ source: nodes[1], target: nodes[2] },
{ source: nodes[2], target: nodes[0] },
],
};
const MyGraph = () => (
<Graph graph={dataSample} linkComponent={DefaultLink} nodeComponent={DefaultNode} />
);
Installation
npm install --save @visx/network
Examples
Network
<Network.Graph />
APIs
#<Graph />
# graph
Graph<Link, Node>
Graph to render nodes and links for.
# left
number
Left transform offset to apply to links and nodes.
# linkComponent
FunctionComponent<LinkProvidedProps<Link>> | ComponentClass<LinkProvidedProps<Link>, any>
Component for rendering a single Link.
# nodeComponent
FunctionComponent<NodeProvidedProps<Node>> | ComponentClass<NodeProvidedProps<Node>, any>
Component for rendering a single Node.
# top
number
Top transform offset to apply to links and nodes.
#<Nodes />
# className
string
Classname to add to each node parent g element.
# nodeComponent
FunctionComponent<NodeProvidedProps<Node>> | ComponentClass<NodeProvidedProps<Node>, any>
Component for rendering a single link.
# nodes
Node[]
Array of links to render.
Default []
# x
(d: Node) => number
Returns the center x coordinate of a node.
Default (d: any) => d?.x || 0
# y
(d: Node) => number
Returns the center y coordinate of a node.
Default (d: any) => d?.y || 0