在ReactJS中的VisJS网络图的画布上添加多个节点框选择器

Question

例子

这是一个jQuery示例,用于在网络上绘制画布以选择多个节点:

• http://jsfiddle.net/kbj54bas/(或Github)

怎么能把它翻译成React？

砂箱

我在这个沙箱中设置react-graph-vis(源代码),并在图表中添加了一个参考:https: //codesandbox.io/s/5m2vv1yo04

尝试

• 使用''上的React.createRef()将eventLisnters添加到Graph/canvas时遇到问题
• 在画布上使用此方法时遇到问题: .getContext("2d")
• 我觉得我不明白如何访问这里提到的react-graph-vis方法

结束目标

• 左键单击+鼠标拖动绘制框选择器
• 在mouseup,选择画布上绘制的框中的节点,并清除绘图

也许我正朝着错误的方向前进.

Answer 1

我使用您共享的JSSampler示例将它们放在一起.

解

您只需要使用ref来连接网络和画布.其他一切都已经到位了. https://codesandbox.io/s/5m2vv1yo04

清理建议

• 将全局变量移动到反应类中
• 将VisJS高亮显示代码分成自己的文件