M
+
S
L
G
A
V
C
-
N
M

    import React, { Component } from 'react';
    import { Circle, Grid, Svg } from 'number-picture'
    import itsSet from 'its-set';
  
    export default class N extends Component {
  
      constructor() {
        super();
        this.displayName = 'N';
        this.state = {};
      }
  
      render() {
        const { nodes, width, height } = this.props;
  
        return (
          <Svg height={height} width={width}>
            <Grid data={nodes} bands size={[width, height]}>
              <Circle
                cx={({ datum }) => datum.x + datum.nodeSize[0] / 2}
                cy={({ datum }) => datum.y + datum.nodeSize[1] / 2}
                r={10}
  
                fill={({ index }) =>
                  this.state.hoveredNodeIndex === index ? '#ff3a55' : '#333333'
                }
                onMouseEnter={({ index }) => {
                  this.setState({ hoveredNodeIndex: index });
                }}
                onMouseOut={() => {
                  this.setState({ hoveredNodeIndex: null });
                }}
                style={({ datum }) => ({
                  opacity: itsSet(datum.opacity) ? datum.opacity : 1,
                })}
  
                enterDuration={3000}
                enterEase='easeLinear'
                enterDatum={() => ({ opacity: 0, nodeSize: [0, 0], x: width / 2, y: height / 2 })}
                updateDuration={3000}
                updateEase='easeLinear'
                exitDuration={3000}
                exitEase='easeLinear'
                exitDatum={() => ({ opacity: 0, nodeSize: [0, 0], x: width / 2, y: height / 2 })}
              />
            </Grid>
          </Svg>
        );
      }
    }