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

Question

例子

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

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

怎么能把它翻译成React？

砂箱

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

尝试

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

结束目标

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

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

Answer 1

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

解

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

清理建议

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

Answer 2

vis.js文档显示网络对象有暴露的方法（http://visjs.org/docs/network）。 react-graph-vis显示您可以通过将回调传递给getNetwork的Graph道具来访问这些方法。该回调将通过对底层Network对象的引用来调用，此时您应该将该参数分配给类属性，如@Irecknagel在Github问题中所描述的那样。

正如您所做的那样在图形组件中添加ref包装了Component。但是，它不一定提供对网络的引用，因为网络是由Graph组件构造的对象。

关于添加事件监听器，react-graph-vis演示源代码可能会有所帮助。他们将事件监听器定义为对象，然后将其作为支柱传递给它。

// 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" }} />

由于我对包裹不熟悉，我不确定调用.getContext("2d")的最终目标是什么。我不确定您定义的“最终目标”是否在您正在使用的软件包范围内。