G6: 自定义边(path)如何能够避免边穿过节点

Created on 10 Feb 2021  ·  12Comments  ·  Source: antvis/G6

  • G6 Version:
  • Platform:
  • Mini Showcase(like screenshots):
  • CodePen Link:

All 12 comments

或者说有什么算法可以避免边穿过节点,可以告知一下吗?

G6 的 polyline 其实是有这个内测功能,但还没有开放使用,这里有一个 demo 用比较 hack 的方法使用到这个功能:
https://codesandbox.io/s/charming-borg-l3umm?file=/index.js

点击画布能看到折线躲避了 obstacle1 和 obstacle2

image
请问下有什么好办法可以指定 polyline 的 bend 的位置吗?
比如我希望红框标出来的线的拐点的位置和其他交汇的线的拐点交汇的位置的x相同

G6 的 polyline 其实是有这个内测功能,但还没有开放使用,这里有一个 demo 用比较 hack 的方法使用到这个功能:
https://codesandbox.io/s/charming-borg-l3umm?file=/index.js

点击画布能看到折线躲避了 obstacle1 和 obstacle2

谢谢

image
请问下有什么好办法可以指定 polyline 的 bend 的位置吗?
比如我希望红框标出来的线的拐点的位置和其他交汇的线的拐点交汇的位置的x相同

可以通过更新边的 controlPoints,指定拐点

我有什么 api 可以拿到其他线条对应的 controlPoints 嘛,我看原型上有一个 getControlPointsByCenter 的方法,但是拿到的结果却是 undefined
因为所有的其他的边都是自动计算出来的,其实我也不知道怎么去计算线条的拐点,我现在的大致思路是获取到所有交汇于一个节点的线条,然后修改其中我觉得有问题的 controlPoint
image
我看文档上说的是如果不指定,就会使用算法算出来,有办法获取到算法算出来的结果嘛,而且那个算法对应的地址目前也是访问不了的,有其他的参考地址嘛

我有什么 api 可以拿到其他线条对应的 controlPoints 嘛,我看原型上有一个 getControlPointsByCenter 的方法,但是拿到的结果却是 undefined
因为所有的其他的边都是自动计算出来的,其实我也不知道怎么去计算线条的拐点,我现在的大致思路是获取到所有交汇于一个节点的线条,然后修改其中我觉得有问题的 controlPoint
image
我看文档上说的是如果不指定,就会使用算法算出来,有办法获取到算法算出来的结果嘛,而且那个算法对应的地址目前也是访问不了的,有其他的参考地址嘛

渲染完成之后,直接取边数据中的 controlPoints 应该就是算法计算的结果

A* 算法介绍链接在此:https://www.yuque.com/antv/blog/eyi70n

官网的该链接错误就会尽快修复

渲染完成之后,直接取边数据中的 controlPoints 应该就是算法计算的结果

在 layout.controlPoints 设置为 true 时,确实可以在边的数据里拿到,不过当其设置为 false 的时候,就无法拿到了,有的时候其实两个节点的最短路径有多重方案,后续有打算提供 api 来选择两个节点的最短路径嘛

渲染完成之后,直接取边数据中的 controlPoints 应该就是算法计算的结果

在 layout.controlPoints 设置为 true 时,确实可以在边的数据里拿到,不过当其设置为 false 的时候,就无法拿到了,有的时候其实两个节点的最短路径有多重方案,后续有打算提供 api 来选择两个节点的最短路径嘛

如果边没有被渲染成折线的话,就没有 controlPoints

你说的是另外一个问题吗?最短路径现在已经支持多个结果了哦,findShortestPath 返回值中的 allPath 就是所有的最短路径。文档还没来得及更新

如果边没有被渲染成折线的话,就没有 controlPoints

image
其实是被渲染成折线的,我用的是 dagre 的布局算法,但是数据里确实是没有 controlPoints 的

你说的是另外一个问题吗?最短路径现在已经支持多个结果了哦,findShortestPath 返回值中的 allPath 就是所有的最短路径。文档还没来得及更新
我说的不是一个问题,比如说上面的图中,两个节点的线的controlpoints 应该有 2 中方案,另外一种就是我箭头标出来的部分

如果边没有被渲染成折线的话,就没有 controlPoints

image
其实是被渲染成折线的,我用的是 dagre 的布局算法,但是数据里确实是没有 controlPoints 的

你说的是另外一个问题吗?最短路径现在已经支持多个结果了哦,findShortestPath 返回值中的 allPath 就是所有的最短路径。文档还没来得及更新
我说的不是一个问题,比如说上面的图中,两个节点的线的controlpoints 应该有 2 中方案,另外一种就是我箭头标出来的部分

看了一下确实是这样的,折线如果是自动计算的话,没有保存 controlPoints 到数据中,是直接将绘制成折线的样子的,路径可以在 edge.getKeyShape().attr('path') 看到,看样子如果要根据自动计算的折线来修改的话,应该需要根据这个 path 中的值,再通过 updateItem 给到边修改后的 controlPoints

Was this page helpful?
0 / 5 - 0 ratings