React+D3 copy

forked from sxywu's block: Updated React+D3, Approach #1

#root {
  width: 400px;
  text-align: center;
  color: #333;
}

.update {
  padding: 5px 10px;
  margin: 10px;
  cursor: pointer;
  border: 1px solid #333;
  display: inline-block;
}

.node {
  fill: #51aae8;
  stroke: #fff;
  cursor: pointer;
}

.link {
  stroke: #51aae8;
}
  </style>
</head>

class Graph extends React.Component {
  constructor(props) {
    super(props);
    this.state = {selected: null};
  }

componentWillMount() {
    this.calculateData(this.props);
  }

componentWillReceiveProps(nextProps) {
    this.calculateData(nextProps);
  }

calculateData(props) {
    var {nodes, links} = props;
    // set up force simulation to calculate node+link positions
    simulation.nodes(nodes)
      .force('link', d3.forceLink(links).id(d => d.key).distance(100));
    // let force simulation run 2000 times
    _.times(2000, () => simulation.tick());
  }

selectNode(selected) {
    if (selected === this.state.selected) {
      this.setState({selected: null});
    } else {
      this.setState({selected: selected});
    }
  }

render() {
    // if a node has been selected, calculate the link+nodes it's connected to
    var highlightedNodes = {};
    var highlightedLinks = {};
    if (this.state.selected) {
      highlightedNodes[this.state.selected.key] = 1;
      _.each(this.props.links, link => {
        if (link.source.key === this.state.selected.key) {
          highlightedNodes[link.target.key] = 1;
          highlightedLinks[link.key] = 1;
        }
        if (link.target.key === this.state.selected.key) {
          highlightedNodes[link.source.key] = 1;
          highlightedLinks[link.key] = 1;
        }
      });
    }

return (
      <svg>
        {links}
        {nodes}
      </svg>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.updateData = this.updateData.bind(this);
    this.state = {nodes: [], links: []};
  }

componentWillMount() {
    this.updateData();
  }

updateData() {
    var newData = randomData(this.state.nodes, width, height);
    this.setState(newData);
  }

render() {
    return (
      <div>
        <Graph {...this.state} />
        <div className="update" onClick={this.updateData}>update</div>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);
  </script>
</body>

https://unpkg.com/react@latest/dist/react.js

https://unpkg.com/react-dom@latest/dist/react-dom.js

https://unpkg.com/babel-standalone@6.15.0/babel.min.js

https://unpkg.com/d3@4.10.0

https://unpkg.com/lodash@4.17.4