Change node colour onclick react-d3-graph

Question

I have created a very basic network graph with nodes and links between the nodes using the react d3-graph module. How could I possibly allow my users to change the colour of a node by double clicking on it?

Here are the docs I am following for the library I am using: https://goodguydaniel.com/react-d3-graph/docs/

Note: I also have an empty on click function in my code which receives the id of the node the user clicks on.

Here is my code:

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: {
        nodes: [
          {id: 'Harry'},
          {id: 'Saly'},
          {id: 'Aly'}
        ],
        links: [
          {source: 'Harry', target: 'Aly'},
          {source: 'Harry', target: 'Saly'},
        ]
      },
      myConfig: {
        nodeHighlightBehavior: true,
        node: {
          color: 'lightgreen',
          size: 120,
          highlightStrokeColor: 'blue'
        },
        link: {
          highlightColor: 'lightblue'
        }
      }
    }
  }

  render() {
    return (
      <div className="App">
        <Graph
          id='graph-id' // id is mandatory, if no id is defined rd3g will throw an error
          data={this.state.data}
          config={this.state.myConfig}
          onClickGraph={onClickGraph}
          onClickNode={onClickNode}
          onDoubleClickNode={onDoubleClickNode}
          onRightClickNode={onRightClickNode}
          onClickLink={onClickLink}
          onRightClickLink={onRightClickLink}
          onMouseOverNode={onMouseOverNode}
          onMouseOutNode={onMouseOutNode}
          onMouseOverLink={onMouseOverLink}
          onMouseOutLink={onMouseOutLink} 
        />
      </div>
    );
  }
}

Answer 1

According to the documentation, we can pass color as an attribute. All we need to do now is utilize this inside double click handler. I believe this example will be useful.