Graph

Graph

All Graphire components and hooks must be placed inside the <Graph> wrapper, which determines the context of the graph.

import { Graph } from 'graphire'
<Graph>  
  {/* Nodes, links, and layouts go here. */}
</Graph>

<Graph/>

Prop	Type	Default	Description
dim	number	2	Can be 2 or 3 - used by layouts to determine if simulation must run in 3D or 2D.

Hooks

useNode

The useNode hook is used to define a node. Every time that the node position is updated, either by the layout or manually by using the api, the hook function will be called providing the new position and the node data. The node data will contain all params you provided, and additional parameters handled by layouts (e.g. the velocities of the nodes vx, vy, vz if you are using <LayoutForce/>).

const api = useNode((position, node) => {
  const [x, y, z] = position
  // Called when a node position is updated by the layout or api.
}, params)

params

The following optional params can be provided/updated:

Prop	Type	Default	Description
uid	number	undefined	Unique id to refer to this node, primarily by the useLink hook.
x,y,z	number,number,number	0,0,0	The position of the node.
fx,fy,fz	number,number,number	undefined,undefined,undefined	The fixed position of the node (e.g. to override the simulation to fix/drag node).
vx,vy,vz	number,number,number	0,0,0	(Only with <LayoutForce/>) velocities of the node.
radius	number	1.0	(Only with <ForceCollide/>) collision radius of the node.

Note that you can provide any additional parameters you want, which will be accessible from node, links, and layouts.

api

If you want to update the node position without having to re-render the value (e.g. while dragging a node), you can use the optional node api.

api.set(params) // Set any node params.
// e.g. 
api.set({ x, y, z }) // To set the node position manually.

useLink

The useLink hook is used to define a link. Every time that one of the nodes (with uid sourceUid or targetUid) connected to the link is updated, the function will be called, providing the new sourcePosition and targetPosition of the sourceNode and targetNode respectively.

const api = useLink((sourcePosition, targetPosition, sourceNode, targetNode) => {
  const [sx, sy, sz] = sourcePosition
  const [tx, ty, tz] = targetPosition 
  // Called when source or target node position is updated.
}, sourceUid, targetUid, params)

params

The following optional params can be provided/updated:

Prop	Type	Default	Description
distance	number	50.0	(Only with <ForceLink/>) link distance between nodes.

Similarly to useNode, you can provide any additional params to the link.

FAQ

Should I update node and link parameters using the api or params with useState?

You can do both. The reason we provide an api is to support for fast (transient) updates without forcing a UI re-render. For example, if you are dragging a node the position will change constantly, it's not a good practice to do "fast" updates inside React state, in this case you should use the api.