N
+
S
L
G
A
V
C
-
N
M
The ForceSimulation component is a work in progress. Use with caution in production.

    import React, { Component } from 'react';
    import { Circle, ForceSimulation, Line, Svg } from 'number-picture'
    import { forceLink, forceCollide, forceManyBody, forceCenter, forceY, forceX } from 'd3-force';
  
    export default class N extends Component {
  
      constructor() {
        super();
        this.displayName = 'N';
        this.state = {};
      }
  
      render() {
        const { nodes, links, width, height } = this.props;
  
        return (
          <Svg height={height} width={width}>
            <ForceSimulation
              nodes={nodes}
              links={links}
              id={datum => datum.id}
              forces={{
                link: forceLink().links(links).id(node => node.id),
                collide: forceCollide(30),
                charge: forceManyBody(),
                center: forceCenter(width / 2, height / 2),
                y: forceY(0),
                x: forceX(0),
              }}
              node={
                <Circle
                  cx={({ datum }) => datum.x}
                  cy={({ datum }) => datum.y}
                  r={() => 10}
                  fill={({ index }) =>
                    this.state.hoveredNodeIndex === index ? '#ff3a55' : '#333333'
                  }
                  onMouseEnter={({ index }) => {
                    this.setState({ hoveredNodeIndex: index });
                  }}
                  onMouseOut={() => {
                    this.setState({ hoveredNodeIndex: null });
                  }}
                />
              }
              link={
                <Line
                  x1={({ datum }) => datum.source.x}
                  y1={({ datum }) => datum.source.y}
                  x2={({ datum }) => datum.target.x}
                  y2={({ datum }) => datum.target.y}
                  stroke={({ index }) =>
                    this.state.hoveredNodeIndex === index ? '#ff3a55' : '#333333'
                  }
                  onMouseEnter={({ index }) => {
                    this.setState({ hoveredNodeIndex: index });
                  }}
                  onMouseOut={() => {
                    this.setState({ hoveredNodeIndex: null });
                  }}
                  strokeWidth={2}
                />
              }
            />
          </Svg>
        );
      }
    }