react-vis-force

See the live demo at http://uber.github.io/react-vis-force

Overview

react-vis-force applies the react-vis and d4-style component approach to the d3-force library. This allows users to declaratively provide links and nodes as children of a ForceGraph component.

Example

importReactfrom'react';import{ForceGraph,ForceGraphNode,ForceGraphLink}from'react-vis-force';<ForceGraphsimulationOptions={{height: 300,width: 300}}><ForceGraphNodenode={{id: 'first-node'}}fill="red"/><ForceGraphNodenode={{id: 'second-node'}}fill="blue"/><ForceGraphLinklink={{source: 'first-node',target: 'second-node'}}/></ForceGraph>

Docs

• InteractiveForceGraph
• ForceGraph