X6 icon indicating copy to clipboard operation
X6 copied to clipboard

X6是否存在和G6类似的通过点击链接桩创建边的功能

Open zhanghanguang-git opened this issue 2 years ago • 6 comments

功能描述

当图元过多,节点间距离太大时连线不好操作

期望解决方案

1.鼠标点击(click)源节点链接桩后,在链接桩与鼠标之间生成一条边; 2.边需要跟随鼠标移动; 3.点击画布空白地方,连线失败; 4.点击目标节点的链接桩,校验是否连线合法,合法则完成连接

zhanghanguang-git avatar Jul 06 '22 07:07 zhanghanguang-git

这个是默认就有的功能,现在是遇到了什么问题呢?

NewByVector avatar Jul 07 '22 03:07 NewByVector

这个是默认就有的功能,现在是遇到了什么问题呢?

官方提供的案例都是通过拖拽生成边,未发现有点击源链接桩生成边的例子或相应文档,我应该如何对它进行配置才能达到点击链接桩生成边的目的呢?

zhanghanguang-git avatar Jul 07 '22 03:07 zhanghanguang-git

这里说的G6的交互,应该是G6那边一个内置的创建边的交互模式 https://antv-g6.gitee.io/zh/docs/manual/middle/states/defaultBehavior#create-edge

两个库,由于设计理念,使用场景不太一样。所以默认的交互逻辑有一些区别。

  1. G6这个内置的创建边的逻辑,也可以通过将trigger配置为drag变成和X6这边一样的连线逻辑。
  2. X6这边,你也可以自己通过监听几个事件组合实现点击后连线的逻辑。

大概需要监听 node:magnet:click , blank:mousemove就可以实现了吧。

lloydzhou avatar Jul 08 '22 08:07 lloydzhou

这里说的G6的交互,应该是G6那边一个内置的创建边的交互模式 https://antv-g6.gitee.io/zh/docs/manual/middle/states/defaultBehavior#create-edge

两个库,由于设计理念,使用场景不太一样。所以默认的交互逻辑有一些区别。

  1. G6这个内置的创建边的逻辑,也可以通过将trigger配置为drag变成和X6这边一样的连线逻辑。
  2. X6这边,你也可以自己通过监听几个事件组合实现点击后连线的逻辑。

大概需要监听 node:magnet:click , blank:mousemove就可以实现了吧。

是的,我们的思路是一致的,我之前已经实现这个功能,而且深入到节点的链接桩,不过由于逻辑方面的问题导致性能损耗很大,效果不理想,同时和原有通过拖动生成边的功能部分重叠,因此想在官方方面层面看是否有更完善的功能。

zhanghanguang-git avatar Jul 09 '22 02:07 zhanghanguang-git

逻辑很简单,判断点击事件

有一个cache数组,[第一位,第二位] 第一次点击,如果是portid,port加入cache数组第一位。

在第二次点击后 1 判断cache数组是否有且只有1个元素。 2 如果有,该次点击的portid如果不在 第一个元素所在的节点上,就创建成功 3 如果不是,清空cache数组。

是否能创建 在createEdge函数 里搞

完毕

komagic avatar Aug 07 '22 09:08 komagic

x6主要问题是性能不好,导出有bug,用的话还是凑合的。

komagic avatar Aug 07 '22 09:08 komagic

这样可以实现两点间边的创建 但是如何实现鼠标移动过程中边也跟随移动 就像拖拽时那样

xiaojueji avatar Oct 31 '22 02:10 xiaojueji

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.

x6-bot[bot] avatar Nov 01 '23 00:11 x6-bot[bot]