Adding nodes?

[MainShayne233]

So I started off with the example in the README, and added a simple button that adds a node and link on click:

import React, { Component } from 'react'
import { Graph } from 'react-d3-graph'

const data = {
  nodes: [
    {id: 'Harry'},
    {id: 'Sally'},
    {id: 'Alice'}
  ],
  links: [
    {source: 'Harry', target: 'Sally'},
    {source: 'Harry', target: 'Alice'},
  ]
}

const myConfig = {
  highlightBehavior: true,
  node: {
    color: 'lightgreen',
    size: 120,
    highlightStrokeColor: 'blue'
  },
  link: {
    highlightColor: 'lightblue'
  }
}

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      data: data,
    }
  }

  addNode() {
    this.setState({
      data: {
        nodes: this.state.data.nodes.concat([ {id: 'New Node'} ]),
        links: this.state.data.links.concat([ { source: 'New Node', target: 'Harry' } ]),
      }
    })
  }

  render() {
    return (
      <div className="App">
        <Graph
          id="graph"
          data={this.state.data}
          config={myConfig}
        />
        <button
          onClick={this.addNode.bind(this)}
        >
          Add Node
        </button>
      </div>
    )
  }
}

export default App

But this does not add the node to the graph. It seems like even though the data state is definitely being updated, the nodes aren't being 'processed' by D3 (doesn't have all of the coordinates/D3 specific data added to them). Could maybe be an issue of when D3 is called with the data? Should probably be called whenever there is an update?

[MainShayne233]

#8

[danielcaldas]

Hey nice stuff! Some people have already mentioned to me that support for adding nodes would be awesome. Still, the component architecture is not yet ready to have this behavior 😩. Still your suggestion is the first step for supporting graph data update, that is rebuilding the nodes and links model each time an update is passed to the component. There is a problem with your approach tough, each time a _tick occurs the whole model is rebuilt (since it is called inside componentDidUpdate lifecycle hook).

I will get rid of the componentDidUpdate soon, but for sake of performance I will only build the model in componentWillReceiveProps. Another step that is needed in order to node addition to work properly run the block that is inside componentDidMount in order to make D3 aware of the new graph data structure.

[MainShayne233]

I definitely imagined that the architecture would fight back a change like this, and totally understand the mistake now involving componentDidUpdate. Though it could become a state management nightmare, one solution could involve storing the initial data in the state, and then doing a manual diff to check for new/altered data, and then telling D3 about any new data if found. This is definitely a tricky problem considering the way D3 works; kind of collides with the core of React. Still, solid D3 solutions in React would be amazing, and I thank you for putting in the time to get us there :).

[danielcaldas]

Now data updates are reflected on the graph 😃
#9