单击react-d3-graph更改节点颜色

Question

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

以下是我正在使用的库的文档：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

根据文档，我们可以将颜色作为属性进行传递。我们现在所需要做的就是利用这个内部双击处理程序。我相信这个例子会很有用。