AntV G6 的坑之——从卡掉渣到满帧需要几步

这篇具有很好参考价值的文章主要介绍了AntV G6 的坑之——从卡掉渣到满帧需要几步。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

AntV G6 是一款图可视化与分析开源引擎。《AntV G6 的坑之——XXX》系列文章持续更新中,总结常见问题及神坑解决方案。任何问题可在 GitHub Issue 中提问,求 GitHub Star ⭐️https://github.com/antvis/g6

原文链接:https://g6.antv.antgroup.com/manual/faq/performance-opt

antv g6 优化,数据可视化,前端,javascript,开源

在面对复杂数据的图可视分析,你的 G6 应用是否出现了卡顿、掉帧、不流畅现象?跟着本文的 tips 排查和优化,提升你的图可视化应用的性能。G6 的性能瓶颈主要在两个方面:渲染、计算。本小节介绍性能瓶颈的一些原理,对理论不感兴趣只想直接优化代码的小伙伴可以直接跳到解决方案章节。

性能瓶颈

性能瓶颈 — 渲染

在渲染方面,性能主要取决于当前画布上形状元素的个数,e.g. 一个节点上有矩形、文本、图片三个图形,一条边上有路径、文本两个图形,那么一份 100 个节点、50 条边的图数据,将渲染出 100 * 3 + 50 * 2 = 400 个图形。然而,开发者常常自定义非常复杂的节点,一个节点上可能有 10~20 个图形,那么画布上的图形数量将陡增。因此,尽可能地减少不必要的图形绘制,是提升渲染性能的主要手段。

性能瓶颈 — 计算

计算方面,主要包括节点布局计算、折线自动寻径算法等。

解决方案

G6 内部代码,我们在持续迭代其性能。而基于 G6 的图应用,则需要应用的开发者关注实现方式,不合理的实现方式很可能导致性能的额外开销。

定义合理的画布大小

一般来说,我们应当根据浏览器中容器的大小设置图画布的大小,即在图实例上配置的 widthheight。目前主流显示器的分辨率来看,浏览器中放置图的容器长一般都不会超过 2500,高一般不会超过 2000。之前曾经遇到过开发者将图的 widthheight 设置到几万,这造成了 <canvas /> 标签的宽高非常大。这完全没有必要,因为大部分超出了浏览器视口。实际上,我们绘制的节点即使坐标达到了上万,我们仍然可以通过 drag-canvaszoom-canvas 等交互滚动查看,没有必要设置巨大的图宽高。

尽可能选择 Canvas 渲染

相比于 Canvas,可能部分开发者更熟悉 DOM/SVG 的定义,毕竟 SVG 渲染出来之后可以审查元素,更符合我们的日常调试习惯。比如当你在自定义节点中使用 group.addShape('dom', {...}) 这种 ‘dom’ 图形时,就必须要使用 SVG 渲染,即在图实例上配置 renderer: 'svg'但 SVG 的性能比 Canvas 差得多。 在数据较大、节点比较复杂的情况下,我们强烈推荐你使用 Canvas 进行渲染。Canvas 定义图形的方式也非常灵活,完全可以覆盖 SVG 的能力,或任何看起来像 DOM 定义的卡片样式的节点。比如下面这两个例子,都是使用 Canvas 渲染和定义。

  • http://g6.antv.antgroup.com/examples/item/customNode/#card
  • http://g6.antv.antgroup.com/examples/item/customNode/#cardNode

回到 SVG 容易审查这个优势,虽然 Canvas 上没有办法审查每一个图形,但我们可以通过下面方式打印图形的属性,进行调试:文章来源地址https://www.toymoban.com/news/detail-595440.html

// 整个图
const graphGroup = graph.getGroup(); // 整个图的根图形分组
const graphGroups = graphGroup.get('children'); // 一般会有 -node -edge -delegate 几个分组

// 单个节点(单个边/ combo 也类似)
const node = graph.findById('node1'); // 找到某个节点对象
const nodeShapeGroup = node.getContainer(); // 获取该节点的图形分组
const nodeShapes = nodeShapeGroup.get('children'); // 获取改节点中的所有图形
const keyShape = node.getKeyShape(); // 获取该节点的关键图形,keyShape 在 nodeShapes 中
const labelShape = nodeShapeGroup.find(ele => ele.get('name') === 'label-shape'); // 获取 name 为 'label-shape' 的图形(name 在 addShape 时指定)。labelShape 在 nodeShapes 中
console.log

到了这里,关于AntV G6 的坑之——从卡掉渣到满帧需要几步的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • antv/g6 交互与事件及自定义Behavior

    在 G6 中,提供了直接的单机事件、还有监听时机的方法。可以监听画布、节点、边、以及各函数被调用的时机等: 1. 绑定事件 要绑定事件,首先需要获得图表实例( Graph 实例),然后使用 on 方法来绑定事件。 分为三类:全局事件、canvas事件、节点/边/combo事件; eventName 是

    2024年02月04日
    浏览(43)
  • 可视化—AntV G6实现节点连线及展开收缩分组

    AntV 是蚂蚁金服全新一代数据可视化解决方案,主要包含数据驱动的高交互可视化图形语法G2,专注解决流程与关系分析的图表库 G6、适于对性能、体积、扩展性要求严苛的场景。 demo使用 数字 模拟真实的节点及分组数据。 combo 内的 nodes 亦是使用 随机数 生成,节点之前的

    2024年02月16日
    浏览(62)
  • vue2中实现Antv g6 流程图 以及自定义节点

    本案例 antv g6版本: \\\"@antv/g6\\\": \\\"^3.4.8\\\", 效果: 1.引入antv g6和echarts差不多 一定记得给盒子设置宽高 初学者一个,以上如有问题或者错误,多谢指出

    2024年02月13日
    浏览(54)
  • 使用antv/G6在vue项目中开发较复杂样式流程图

    设计师提供了一版样式较复杂的流程图,我搜了一些常用的vue-super-flow和vue-x6-flow等都只支持简单的样式。之前自己写过纯展示流程图不涉及太多交互,感觉还是找一个成熟的插件开发更适合,也方便其他同事参考,所以最后选择了用antv/G6自己个性化开发,总结了使用antv/G6在

    2023年04月09日
    浏览(108)
  • 「AntV」X6开发实践:踩过的坑与解决方案

    长期更新版文档请移步语雀(「AntV」X6开发实践:踩过的坑与解决方案 (yuque.com)) --Recent update:2024-01-05 相信你们在开发中更多的需求是需要自定义拖拽源,毕竟自定义的功能扩展性高一些,而且可以根据你的业务需求灵活设置。自定义拖拽的优点就是:万物皆可成为拖拽源,

    2024年02月08日
    浏览(104)
  • ChatGPT让现在的软件都土掉渣了

    我们家有两个娃,每次我们想要出去时订个酒店时都好麻烦。我在某程上找,我先看有没有家庭房,但家庭房很少,而且有些家庭房实际上只能睡得下两大一小。普通房间能不能睡得下四个人,那可是得查看很多信息,如床的尺寸、是否可以加床,是否可以睡沙发等等。每次

    2023年04月09日
    浏览(34)
  • java入坑之泛型

    Java泛型是JDK 5中引入的一个新特性,它提供了编译时类型安全检测机制,该机制允许程序员在编译时检测到非法的类型 泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数。这意味着你可以使用一套代码来处理多种不同类型的数据 ArrayListE,E表示元素El

    2024年02月10日
    浏览(34)
  • Java入坑之语法糖

    for 循环 是一种常用的循环结构,它可以通过一个变量(通常是 i)来控制循环的次数和范围。for 循环的语法格式如下: for-each 循环 是 Java 1.5 的新特性之一,它可以方便地遍历数组或集合中的元素,而不需要使用下标或迭代器。for-each 循环的语法格式如下: for 和 for-each 循

    2024年02月07日
    浏览(63)
  • java入坑之网络编程

     计算机通讯:数据从一个IP的port出发(发送方),运输到另外一个IP的port(接收方) UDP:无连接无状态的通讯协议, -发送方发送消息,如果接收方刚好在目的地,则可以接受。如果不在,那这个消息就丢失了 -发送方也无法得知是否发送成功 -UDP的好处就是简单,节省,经

    2024年02月10日
    浏览(36)
  • nacos踩坑之nacos运行报错

    在2021年年底的时候使用docker的方式体验了一波nacos,现在有需求所以需要运行nacos,结果一旦运行始终报错, 最开始以为是因为我是用arm服务器且不是nacos官方要求的JDK的原因, 为什么会这么想因为arm的环境是OpenJDK,OpenJDK和oracleJDK,有部分差异的 上官方要求的JDK结果还是同样报错

    2024年02月12日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包