Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding nodes? #7

Closed
MainShayne233 opened this issue Jun 11, 2017 · 4 comments
Labels

Comments

@MainShayne233
Copy link

@MainShayne233 MainShayne233 commented Jun 11, 2017

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

This comment has been minimized.

Copy link
Author

@MainShayne233 MainShayne233 commented Jun 11, 2017

#8

@danielcaldas

This comment has been minimized.

Copy link
Owner

@danielcaldas danielcaldas commented Jun 12, 2017

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

This comment has been minimized.

Copy link
Author

@MainShayne233 MainShayne233 commented Jun 13, 2017

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

This comment has been minimized.

Copy link
Owner

@danielcaldas danielcaldas commented Jul 31, 2017

Now data updates are reflected on the graph 😃
#9

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.