更改节点颜色 onclick react-d3-graph

Question

我使用 react d3-graph 模块创建了一个非常基本的网络图，其中包含节点和节点之间的链接。我怎么可能允许我的用户通过双击来更改节点的颜色？

以下是我正在关注的关于我正在使用的库的文档： https://goodguydaniel.com/react-d3-graph/docs/

注意：我的代码中还有一个空的点击函数，它接收用户点击的节点的 id。

这是我的代码：

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

根据documentation，我们可以将颜色作为属性传递。我们现在需要做的就是在双击处理程序中使用它。 我相信这个example 会很有用。