相关疑难解决方法(0)

我一直试图在React中制作一个可拖动的d3力布局一段时间了.React必须能够与图中的节点进行交互.例如,当您单击节点时,React应该能够返回节点的id onClick.

我根据Shirley Wu的一个例子制作了4个组件.一个App组件,用于保存图形数据的状态并呈现Graph组件.图形组件呈现节点和链接组件.这样,可点击节点部分就可以解决了.

当页面呈现时,节点将只能拖动几秒钟.渲染页面后,您可以立即拖动节点,然后突然,被拖动的节点完全停在一个位置.此时,其他节点也不能再被拖动.我希望能够随时拖动节点.

我可以在网上找到一些关于在图形后面创建画布,设置填充和指针事件的提示.关于letting或d3或React进行渲染和计算的讨论也很多.我尝试使用React的所有生命周期方法,但我无法使用它.

你可以在这里找到一个实时样本:https://codepen.io/vialito/pen/WMKwEr

请记住,圈子只能点击几秒钟.然后他们会留在同一个地方.所有浏览器和每次刷新后的行为都是相同的.当您记录拖动功能时,您会看到它在拖动时会分配新的坐标,但圆圈不会显示在它的新位置.

我非常渴望了解这个问题的原因,如果你甚至可以提出解决方案,那将是非常酷的.

App.js

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      data : {"nodes":
        [
          {"name": "fruit", "id": 1},
          {"name": "apple", "id": 2},
          {"name": "orange", "id": 3},
          {"name": "banana", "id": 4}
        ],
      "links": 
        [
          {"source": 1, "target": 2},
          {"source": 1, "target": 3}
        ]
      }
    }
  }

  render() {
    return (
            <div className="graphContainer">
                <Graph data={this.state.data} />
            </div>
        )
    }
}

class Graph extends React.Component {

    componentDidMount() {
        this.d3Graph = …