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

Question

例子

这是一个在网络上绘制画布以选择多个节点的 jQuery 示例：

• http://jsfiddle.net/kbj54bas/（或Github）

如何将其转换为 React？

沙盒

我在这个沙箱中设置react-graph-vis（source），并向图表添加了一个参考： https ://codesandbox.io/s/5m2vv1yo04

尝试

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

最终目标

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

也许我走错了方向。

标签： javascriptreactjscanvasvis.jsvis.js-network

Answer 1

我使用您共享的 JSSampler 示例将其放在一起。

解决方案

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

清理建议

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