例子
这是一个jQuery示例,用于在网络上绘制画布以选择多个节点:
> http://jsfiddle.net/kbj54bas/(或Github)
怎么能把它翻译成React?
砂箱
我在这个沙箱中设置了react-graph-vis(source),并在图表中添加了一个ref:
https://codesandbox.io/s/5m2vv1yo04
尝试
>在使用”上的React.createRef()将eventLisnters添加到Graph / canvas时遇到问题
>在画布上使用此方法时遇到问题:.getContext(“2d”)
>我觉得我不明白如何访问react-graph-vis方法mentioned here
结束目标
>在左键单击鼠标拖动时绘制框选择器
>在mouseup上,选择画布上绘制的框中的节点,然后清除绘图
也许我正朝着错误的方向前进.
解决方法
我使用您共享的JSSampler示例将它们放在一起.
解
您只需要使用ref来连接网络和画布.其他一切都已经到位了.
https://codesandbox.io/s/5m2vv1yo04
清理建议
>将全局变量移动到反应类中>将VisJS高亮显示代码分成自己的文件