import React from 'react';
import { ForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force';
<ForceGraph zoom simulationOptions={{ height: 300, width: 300 }}>
<ForceGraphNode node={{ id: 'first-node' }} fill="red" />
<ForceGraphNode node={{ id: 'second-node' }} fill="blue" />
<ForceGraphLink link={{ source: 'first-node', target: 'second-node' }} />
<line x1={150} y1={0} x2={150} y2={300} zoomable stroke="green" />
</ForceGraph><ForceGraphNode />s, <ForceGraphLink />s, and other children that will be embedded in the container <svg /> element. Use zoomable prop if using zoom to opt custom children in or out of zooming.
When true, wraps the ForceGraph in a <ZoomableSVGGroup />. Any children that are not <ForceGraphNode /> or <ForceGraphLink /> can use the zoomable prop to opt them in or out of the <ZoomableSVGGroup />.
An object of options to pass into d3-force.
- number minScale
- number maxScale
- number zoomSpeed
- function onZoom(event: TouchMoveEvent, scale: number)
- function onPan(event: MouseMoveEvent, newX: number, newY: number)
An object of options to pass into d3-force.
- boolean animate
- number height
- number width
- object strength (see strengths in the d3-force documentation)
- function|number strength.charge
- function|number strength.collide
- function|number strength.x
- function|number strength.y
- boolean animate
- number alpha
- number alphaDecay
- number alphaMin
- number alphaTarget
- number velocityDecay
- number radiusMargin
A function to use as an alternative to forceUtils.createSimulation for creating a d3-force simulation.
A function to use as an alternative to forceUtils.updateSimulation for updating a simulation given data and options.
The attribute on each node to use as the label when rendering labels.
An object with { x(node) {}, y(node) {} } to calculate the position offset to place each label at.
Force show all of the labels. You can also show individual labels with <ForceGraphNode showLabel />.