Updated React+D3, Approach #2

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

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

#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: #ee8365;
  stroke: #fff;
  cursor: pointer;
}

.link {
  stroke: #ee8365;
  stroke-opacity: .5;
}
  </style>
</head>

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

this.selectNode = this.selectNode.bind(this);
  }

shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.version === this.props.version) {
      // if version is the same, no updates to data
      // so it must be interaction to select+highlight a node
      this.calculateHighlights(nextState.selected);
      this.circles.attr('opacity', d =>
        !nextState.selected || this.highlightedNodes[d.key] ? 1 : 0.2)
      this.lines.attr('opacity', d =>
        !nextState.selected || this.highlightedLinks[d.key] ? 0.5 : 0.1)
      return false;
    }
    return true;
  }

componentDidMount() {
    this.container = d3.select(this.refs.container);
    this.calculateData();
    this.calculateHighlights(this.state.selected);
    this.renderLinks();
    this.renderNodes();
  }

componentDidUpdate() {
    this.calculateData();
    this.calculateHighlights(this.state.selected);
    this.renderLinks();
    this.renderNodes();
  }

calculateData() {
    var {nodes, links} = this.props;
    simulation.nodes(nodes)
      .force('link', d3.forceLink(links).id(d => d.key).distance(100));

_.times(2000, () => simulation.tick());
    this.nodes = nodes;
    this.links = links;
  }

calculateHighlights(selected) {
    this.highlightedNodes = {};
    this.highlightedLinks = {};
    if (selected) {
      this.highlightedNodes[selected] = 1;
      _.each(this.links, link => {
        if (link.source.key === selected) {
          this.highlightedNodes[link.target.key] = 1;
          this.highlightedLinks[link.key] = 1;
        }
        if (link.target.key === selected) {
          this.highlightedNodes[link.source.key] = 1;
          this.highlightedLinks[link.key] = 1;
        }
      });
    }
  }

renderNodes() {
    this.circles = this.container.selectAll('circle')
      .data(this.nodes, d => d.key);
    // exit
    this.circles.exit().remove();
    // enter + update
    this.circles = this.circles.enter().append('circle')
      .classed('node', true)
      .merge(this.circles)
      .attr('cx', d => d.x)
      .attr('cy', d => d.y)
      .attr('r', d => d.size)
      .attr('opacity', d =>
        !this.state.selected || this.highlightedNodes[d.key] ? 1 : 0.2)
      .on('click', this.selectNode);
  }

renderLinks() {
    this.lines = this.container.selectAll('line')
      .data(this.links, d => d.key);
    // exit
    this.lines.exit().remove();
    // enter + update
    this.lines = this.lines.enter().insert('line', 'circle')
      .classed('link', true)
      .merge(this.lines)
      .attr('stroke-width', d => d.size)
      .attr('x1', d => d.source.x)
      .attr('x2', d => d.target.x)
      .attr('y1', d => d.source.y)
      .attr('y2', d => d.target.y)
      .attr('opacity', d =>
        !this.state.selected || this.highlightedLinks[d.key] ? 0.5 : 0.1);
  }

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

render() {
    return (
      <svg ref='container' />
    )
  }
}

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

componentWillMount() {
    this.updateData();
  }

updateData() {
    var {nodes, links} = randomData(this.state.nodes, width, height);
    this.setState({nodes, links, version: this.state.version + 1});
  }

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

https://npmcdn.com/react@15.3.0/dist/react.min.js

https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js

https://npmcdn.com/babel-core@5.8.38/browser.min.js

https://unpkg.com/d3@4.10.0

https://unpkg.com/lodash@4.17.4