gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 21:22:50 27 4
gpt4 key购买 nike

我使用 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>
);
}
}

最佳答案

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

关于javascript - 更改节点颜色 onclick react-d3-graph,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60806462/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com