d3.js 更改单击react-d3-graph时的节点颜色

x6yk4ghg  于 2022-11-12  发布在  React
关注(0)|答案(1)|浏览(110)

我已经用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>
    );
  }
}
k3bvogb1

k3bvogb11#

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

相关问题