AntV G6 关于多边绘制的解决方案

最新推荐文章于 2024-08-29 17:02:59 发布
最新推荐文章于 2024-08-29 17:02:59 发布
阅读量4.1k 收藏
点赞数
原文链接：https://juejin.im/post/5b18bf03f265da6e281c09c7
版权
本文介绍了AntV G6库在处理多边形关系图时的边分布策略，包括二维贝塞尔曲线、自己到自己的边（使用圆弧线表示）以及弧线链接的实现。此外，还探讨了可收缩边的功能性构想和两种点分布的优化方案，分别是基于圆和权的点分布以及基于生成树的点分布。
摘要由CSDN通过智能技术生成

AntV的G6库致力于处理关系图，并且有很好的绑定与使用的接口。但是在实际的需求中，我们需要处理两个节点间的多度关系，这样就要求能有较好的边分布，或者对于整个图有更加好的节点分布计划。

关于边的分布

二维贝塞尔

取最简单的情况，两个点，第一个解决方案是使用二维贝塞尔曲线，并且曲线的分散点在两个点的垂直平分线上：

这样可以保证是上下离散的点，并且较大限度利用两个点之间的区域来绘制边的。

但是在多点多边的情况下，容易出现起点线段的交集。

所以目前看来，对于多点的复杂情况，应该在分布点的时候合理根据出入度分布点。

而且需要解决因为斜率而导致的边间空隙过大/过小。

下面示例为六个点，共100条边。

关于文字描述，在贝塞尔曲线正中心可以加上文字的描述，效果如图：

自己到自己的边

考

最低0.47元/天 解锁文章
weixin_34417635
关注
(g6)节点同方向多条边显示不全及重叠问题
nyf_unknow的博客
03-20 2943
修改方式：使用 util 方法 processParallelEdges。
AntV G6自定义节点（多边形+图片）
Alice_hhu的博客
05-15 4885
不同设备不同的图标，不同状态不同背景色，鼠标点击选中节点高亮。
AntV G6 的坑之——渲染残留/残影
贵林之恋的博客
08-29 277
G6 4.x 依赖的渲染引擎 @antv/g@4.x 版本支持了局部渲染，带了性能提升的同时，也带来了图形更新时可能存在渲染残影的问题。比如拖拽节点时，节点的文本会留下轨迹。关闭局部渲染，graph.get("canvas").set("localRefresh", false);这个方法可能导致性能有所降低。
(G6)图谱节点和边重叠都在一条线上
nyf_unknow的博客
08-19 2985
【代码】(G6)图谱节点和边重叠都在一条线上。
【AntV G6】页面节点错乱
hggl_bera的博客
03-02 992
布局的计算时间和动画产生了冲突，动画开始的时候实际上大数据量的布局还没有计算完成。在展开大量节点的时候，需要把动画关掉。懒加载子节点过多时，页面节点出现错乱，如下图。
AntV G6手记
对于写代码这件事，我是业余的。
12-06 2095
1. G6默认是不支持多条边的，边类型采用quadratic类型最多也只能支持两条边，如果要支持多条变，可以采取官方文档：两节点间存在多条边 | G6的解决办法，文档提出的大概的意思就是采取quadratic边类型，然后控制弯曲度以显示更多的边。当然，也有傻瓜式的解决办法就是直接调用如下代码： G6.Util.processParallelEdges(edges) 这是G6给出的处理多条变的工具函数，将自己的边集传进去，然后边类型选择quadratic即可。 2. 如果业务需要，在edges的对象中
Vue3.x中使用AntV G6绘制力导图实现自适应
BreenCL的博客
12-05 4798
项目下使用绘制图谱；图谱节点为两个地址，节点间存在多条连线情况需求；鼠标悬浮到节点上方时，高亮当前节点并出现气泡提示，展示相关信息；点击图谱连线后需要高亮关联节点和当前连线；图谱大小需要保证自适应（这里可以是根据窗口自适应，也可以是可调整大小的弹窗内的自适应
Vuex和antv/g6实现在线绘制分析流程图功能演示Demo
09-07
基于vue框架实现流程图绘制在项目中实际是一个复杂的应用，但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况并且项目存在保密机制不方便全部分享出来，所以本Demo中仅抽取最基础的部分...
antv g6 animate
12-18
AntV G6 是阿里云推出的数据可视化解决方案，其设计目标是让开发者能够便捷地构建复杂的图结构并进行交互。G6 提供了多种图类型，如无向图、有向图、树图等，满足了不同场景的需求。而 G6 Animate 功能则为这些静态...
antv g6框架离线引用js包
04-26
在前端开发领域，AntV G6 是一个强大的图形构建框架，专为数据可视化设计。它由阿里云的 AntV 团队开发，提供了一系列高级 API 和丰富的图表类型，帮助开发者轻松构建复杂的图可视化应用。本话题主要关注如何在离线...
antv G6绘制流程图
peppa_pig的博客
12-15 8868
先贴上实现的效果图 G6官网，按照官网可以绘制出简单的流程 但是当实际绘制流程图时，简直是要被连接线的折点给搞崩溃 <template> <div id="mountNode"> </div> </template> <script> import utils from "@/plugin/utils"; import G6 from '@antv/g6'; import insertCss from 'inse..
Antv X6 动态连线
hongtoushan的博客
07-23 1万+
antv x6的使用
AntV G6鼠标移入、单击、双击节点，获取节点信息
笑到世界都狼狈的博客
12-24 1万+
如下图所示，对节点常用的事件如下图所示： 主要代码： // 鼠标进入节点 this.graph.on('node:mouseenter', (e) => { const nodeItem = e.item // 获取鼠标进入的节点元素对象 console.log('鼠标移入', nodeItem._cfg) }) // 单击节点 this.graph.on('node:click', (e) => { const nodeItem = e.item // 获取被
AntV G6流程图节点控制显示和隐藏
热门推荐
qq_26321411的博客
04-03 1万+
1、点击隐藏，控制隐藏节点4以及相关的边 2、点击显示，显示节点4以及相关的边3、点击添加颜色，给指定节点4添加颜色demo如下：&lt;!DOCTYPE html&gt;&lt;html&gt;  &lt;head&gt;    &lt;meta charset="utf-8"&gt;    &lt;title&gt;节点方法&lt;/title&gt;    &lt;script
使用G6自定义的坑
qq_37730779的博客
10-24 4990
在使用G6自定义节点时节点文字怎么都显示不了，研究了很久发现要给text设置xy坐标。 group.addShape(‘text’, { attrs: { x: cfg.size[0], // 居中 y: cfg.size[1] * 2 + 10, textAlign: ‘center’, textBaseline: ‘middle’, text: cfg.label, } }) ...
Ant G6创建节点、创建边并连接
热爱生活~热爱工作~热爱每一天~
05-05 2195
// 节点1样式及配置 const model1 = { id: 'node1', children: [], name: '名称', color: 'yellow', x: 200, y: 150, style: { fill: 'blue', }, }; // 创建第一个节点到图上，第一个参数：类型type为‘node’节点 graph.addItem('node', model1); // 节点2样式及配置 cons.
关于antv g6 左右布局不均匀的问题
最新发布
09-12
AntV G6是一款基于声明式语法的JavaScript可视化库，它支持创建复杂的图形网络。如果你遇到左右布局不均匀的问题，这通常是由于节点的位置计算算法或者手动设置的布局配置导致的。G6提供了几种布局算法，如`dagre`, `sfdp`, 和 `cola` 等，它们会尝试自动调整节点位置以达到均衡。 当左右两侧节点分布不均时，可以尝试以下几个步骤解决： 1. **检查布局设置**：确认你在使用`graph布局`时是否设置了合适的参数，比如`align`属性控制对齐方式，默认可能会倾向于中心对齐，你可以指定为`left`或`right`来明确偏移方向。 ```javascript const layout = new G6.Layout({ type: 'dagre', // 或者其他布局类型 align: 'right', // 将布局向右对齐 }); ``` 2. **使用特定布局**：某些布局如`snapring` 或者自定义布局函数可能更适合处理这种不平衡的布局需求。 3. **手动调整**：对于复杂情况，可能需要通过`position`属性直接设置每个节点的位置，确保两边的节点均匀分布。 4. **调整数据结构**：如果是因为数据本身的结构导致的，考虑改变节点间的连接关系，使得布局算法能更自然地生成平衡布局。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值