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

Question

例子

这是 jQuery 在网络上绘制到 select 多个节点的 canvas 示例：

http://jsfiddle.net/kbj54bas/ (or Github)

如何将其转换为 React？

沙盒

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

尝试次数

使用“
在 canvas 上使用此方法时遇到问题：.getContext("2d")
我觉得我不明白如何访问 react-graph-vis 方法 mentioned here

最终目标

绘制框 select或左键单击 + 鼠标拖动
上mouseup、select节点在canvas上绘制方框，并清空绘制

也许我走错了方向。

Answer 1

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

在您进行操作时向 Graph 组件添加 ref 会包装该组件。但是，它不一定会提供对 Network 的引用，因为 Network 是由 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") 的最终目标是什么。我不确定你定义的 'end goals' 是否在你使用的包的范围内。

Answer 2

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

解决方案

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

清理建议

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

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

add multiple node box selector on the canvas of VisJS network graph in ReactJS

javascript

reactjs

canvas

vis.js

vis.js-network

例子

沙盒

尝试次数

最终目标

解决方案

清理建议