javascript - 在 ReactJS 中的 VisJS 网络图的 Canvas 上添加多个节点框选择器

Question

例子

这里是一个在网络上绘制 Canvas 以选择多个节点的 jQuery 示例:

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

如何将其转换为 React？

沙盒

我在这个沙箱中设置了 react-graph-vis( source )，并向图表添加了一个引用: https://codesandbox.io/s/5m2vv1yo04

尝试

• 在“”上使用 React.createRef() 将 eventListers 添加到 Graph/canvas 时遇到问题
• 在 Canvas 上使用此方法时遇到问题:.getContext("2d")
• 我觉得我不明白如何访问react-graph-vis 方法mentioned here

最终目标

• 在左键单击 + 鼠标拖动时绘制框选择器
• 在mouseup上，在 Canvas 上绘制的框中选择节点，并清除绘制

也许我走错了方向。

Answer 1

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

解决方案

您只需要使用 ref 连接网络和 Canvas 。其他一切都差不多就位了。 https://codesandbox.io/s/5m2vv1yo04

清理建议

• 将全局变量移动到 React 类中
• 将 VisJS 高亮代码拆分到自己的文件中