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

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

解决方案

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

清理建议

• 将全局变量移到react类中
• 将VisJS突出显示代码拆分为自己的文件

http://visjs.org/docs/network ). react graph vis显示,可以通过向 getNetwork 支柱 Graph . 调用该回调时将引用底层网络对象,此时应将该参数分配给类属性,如Github问题中@Irecknagel所述。

在执行包装组件的操作时,向图形组件添加ref。但是,它不一定提供对网络的引用,因为网络是由图组件构造的对象。

关于添加事件侦听器,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") 是。我不确定你定义的“最终目标”是否在你正在使用的包的范围内。