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

Question

示例

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

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

如何将其翻译为React？

沙盒

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

尝试

• 使用'''上的React.createRef（）将eventLisnters添加到图/画布时遇到麻烦
• 在画布上使用此方法遇到麻烦：.getContext("2d")
• 我觉得我不明白如何访问react-graph-vis方法mentioned here

最终目标

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

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

Answer 1

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

解决方案

您只需要使用ref连接网络和画布。其他所有事情几乎都落实到位。 https://codesandbox.io/s/5m2vv1yo04

清理建议

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

Answer 2

vis.js文档揭示了Network对象具有公开的方法（http://visjs.org/docs/network）。 react-graph-vis显示，您可以通过将回调传递到getNetwork的{​​{1}}属性来访问这些方法。该回调将通过对基础网络对象的引用来调用，此时您应将该参数分配给类属性，如@Github问题中的@Irecknagel所述。

在执行操作时向Graph组件添加引用将包装该组件。但是，由于网络是由Graph组件构造的对象，因此不一定提供对网络的引用。

关于添加事件侦听器，react-graph-vis演示源代码可能会有所帮助。他们将事件监听器定义为一个对象，然后像这样将其作为prop传入。

Graph

由于我对软件包不熟悉，因此我不确定调用// in render or elsewhere depending on scoping needs const events = { select: function(event) { var { nodes, edges } = event; console.log("Selected nodes:"); console.log(nodes); console.log("Selected edges:"); console.log(edges); } }; // return of render <Graph graph={graph} options={options} events={events} style={{ height: "640px" }} /> 的最终目标是什么。我不确定您定义的“最终目标”是否在您使用的软件包范围内。