在ReactJS的VisJS网络图画布上添加多个节点框选择器 [英] add multiple node box selector on the canvas of VisJS network graph in ReactJS

问题描述

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

Here is a jQuery example of canvas drawing on the network to select multiple nodes:

• < a href = http://jsfiddle.net/kbj54bas/ rel = nofollow noreferrer> http://jsfiddle.net/kbj54bas/ （或 Github ）

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

如何将其转换为React？

How can this be translated to React?

我设置了反应图相对于（源），并将引用添加到图表：
https://codesandbox.io/s/5m2vv1yo04

I setup react-graph-vis(source) in this sandbox, and added a ref to the Graph: https://codesandbox.io/s/5m2vv1yo04

• 使用'
$ b上的React.createRef（）将eventLisnters添加到图形/画布时遇到麻烦$ b
• 在画布上使用此方法遇到麻烦： .getContext（ 2d）
  
• 我感觉我不明白如何访问 = https://github.com/resource-graph-vis 方法。 com / crubier / react-graph-vis / issues / 14 rel = nofollow noreferrer>此处提到

• having trouble adding eventLisnters to the Graph/canvas using a React.createRef() on the ''
• having trouble using this method on the canvas: .getContext("2d")
• I feel I don't understand how to access the react-graph-vis methods mentioned here

• 单击鼠标左键并拖动鼠标拖动


• 在鼠标，在画布上绘制的框中选择节点，然后清除绘图



• draw box selector on left-click + mouse-drag
• on mouseup, select nodes in the box drawn on the canvas, and clear drawing

也许我的方向是错误的。

Maybe I'm going in the wrong direction with this.

推荐答案

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

I threw this together using the JSSampler example you shared.

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

You just needed to use the ref to connect the Network and canvas. Everything else pretty much fell into place. https://codesandbox.io/s/5m2vv1yo04

• 将全局变量移至React类


• 拆分VisJS将代码突出显示到自己的文件中

这篇关于在ReactJS的VisJS网络图画布上添加多个节点框选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！