我已经用react d3-graph模块创建了一个非常基本的网络图,其中包含节点和节点之间的链接。我怎么可能允许我的用户通过双击节点来改变节点的颜色呢?
下面是我正在使用的库的文档:https://goodguydaniel.com/react-d3-graph/docs/
注意:我的代码中还有一个empty on click函数,它接收用户单击的节点的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>
);
}
}
1条答案
按热度按时间k3bvogb11#
根据文档,我们可以将颜色作为一个属性来传递。现在我们需要做的就是利用这个内部双击处理程序。我相信这个example会很有用。