@vx/network

A simple package to visualize a network or graph layout. Does not currently handle network layout.

Example Usage

import { Graph, DefaultLink, DefaultNode } from '@vx/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 @vx/network

Examples

Network

<Network.Graph />

Components

<Graph />
<Nodes />
<Links />
<DefaultNode />
<DefaultLink />

APIs

#<Graph />

# Graph.graphGraph<Link, Node> | undefinedoptional

Graph to render nodes and links for.

# Graph.leftnumber | undefinedoptional

Left transform offset to apply to links and nodes.

# Graph.linkComponentstring | FunctionComponent<LinkProvidedProps<Link>> | ComponentClass<LinkProvidedProps<Link>, any> | undefinedoptional

Component for rendering a single Link.

# Graph.nodeComponentstring | FunctionComponent<NodeProvidedProps<Node>> | ComponentClass<NodeProvidedProps<Node>, any> | undefinedoptional

Component for rendering a single Node.

# Graph.topnumber | undefinedoptional

Top transform offset to apply to links and nodes.

#<Nodes />

# Nodes.classNamestring | undefinedoptional

Classname to add to each node parent g element.

# Nodes.nodeComponentstring | FunctionComponent<NodeProvidedProps<Node>> | ComponentClass<NodeProvidedProps<Node>, any>optional

Component for rendering a single link.

# Nodes.nodesNode[] | undefinedoptional

Array of links to render.

Default []

# Nodes.x((d: Node) => number) | undefinedoptional

Returns the center x coordinate of a node.

Default (d: any) => (d && d.x) || 0

# Nodes.y((d: Node) => number) | undefinedoptional

Returns the center y coordinate of a node.

Default (d: any) => (d && d.y) || 0

#<Links />

# Links.linkComponentstring | FunctionComponent<LinkProvidedProps<Link>> | ComponentClass<LinkProvidedProps<Link>, any>required

Component for rendering a single link.

# Links.classNamestring | undefinedoptional

Classname to add to each link parent g element.

# Links.linksLink[] | undefinedoptional

Array of links to render.

Default []

#<DefaultNode />

# DefaultNode.cxnumber | undefinedoptional

# DefaultNode.cynumber | undefinedoptional

#<DefaultLink />

# DefaultLink.linkanyrequired