darge图节点多,交互卡顿。

[498755303]

问题描述

1. 如sandbox示例,自定义节点,在1K以内交互尚可,大约在3K节点时,交互很卡,再多会产生Maximum call stack size exceeded的报错。
   官方性能示例能达到5W个节点,请问如何优化到可渲染W级别节点
2. minimap相当于copy了一份canvas,会导致性能消耗*2，用imageminimap何时生成图片恰当
3. 是否可以通过对应api检测异步渲染数据的耗时
4. 是否可以提供一个类似于地图的缩放的示例,根据缩放的比例不同,展示的内容层级也不同,比如示例中某种情况下编程展示小圆圈,缩放到一定程度,展示自定义节点
5. 是否可以提供一个类似于虚拟列表的示例，只渲染canvas视口范围内和缓存区的内容,当drag-canvas时再渲染其余部分以提高性能

重现链接

https://codesandbox.io/s/blissful-haslett-hxys8n?file=/src/components/HelloWorld.vue

重现步骤

1.输入框输入10，点击渲染 正常
2. 刷新之后输入框输入1000，点击渲染 略卡
3. 刷新之后输入框输入5000，点击渲染 Maximum call stack size exceeded

预期行为

1. 能优化到W级别的渲染及交互
2. 或者是否有其他的交互方式避免大量数据渲染

平台

• 操作系统: [macOS, Windows, Linux, React Native ...] windows vue
• 网页浏览器: [Google Chrome, Safari, Firefox] chrome
• G6 版本: [4.5.1 ... ] 4.7.1

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[Yanyan-Wang]

看了下，导致栈溢出是 dagre 布局中算法导致。你提供的 demo 中生成的数据是一个超长的链，而在 dagre 中有很多层级递归的算法，因此出现了该问题。如果是一个常见结构的图（不是这样一个超长的链），那么不会报错。在你的 demo 中改了数据生成，不生成超长链

1. 交互上的性能主要取决于图上图元数量，也就是说在大规模数据下，节点/边上图形越多，性能越差。你这里图形还是比较简单的，只有一个 rect + 一个 text
2. imageminimap 对后端计算要求比较高，需要生成和前端渲染出来的一样的图片，如果这个图是相对动态的，那么就要在布局、数据发生变化的时候，重新生成图片。
3. 目前没有，浏览器 performance 火焰图可以看出来性能消耗在哪一块
4. 有一个例子，缩小视图可以看到效果：https://g6.antv.vision/zh/examples/case/treeDemos#decisionTree
5. 目前自动做了视口裁剪，canvas 返回意外的是不会画的

[Yanyan-Wang]

我试了下你的 demo 中，节点数量 3000 个，并且不是一个链的情况下：

• 平移画布的时候掉帧明显，其他交互还是比较流畅的。
• 拖拽节点感觉有点卡，应该是因为自定义节点中没有给 text 图形设置 draggable: true (和 attrs 平级)，因此如果鼠标拖拽发生在了节点的文本上时，拖拽没有被触发，让人感觉好像是卡住。
• 数据比较大的时候，建议把 animate 关掉。另外图比较大，fitView 也不合适了，fitView 会使得图需要缩放得很小才能全部显示在视口内，导致：1 内容太小看不清；2 图有默认的 minZoom 为 0.02（可以配更小点比如 0.0000001），大图 fitView 可能因为超过改下限而缩放失败。建议在数据比较大的情况下把 fitView 替换成 fitCenter

[498755303]

1. imageminimap 我理解 这个是在布局或者数据变化时,生成个base64渲染,性能会好一点？
2. 目前自动做了视口裁剪，canvas 返回以外的是不会画的 这个结论我理解是已经做了优化,canvas之外的节点不再绘制。

按照上述做了修改,3K个节点平移等操作仍然掉帧明显, 是否有还有其他的优化建议或者是其他的展示方式来避免呢

[k644606347]

请问有什么进展吗，dagre我也遇到了拖拽卡顿问题，我的情况是某一层级下数据量过大，如第二层有1w+nodes

[Yanyan-Wang]

请问有什么进展吗，dagre我也遇到了拖拽卡顿问题，我的情况是某一层级下数据量过大，如第二层有1w+nodes

想问下第二层 1w 个节点，用户咋看嘞？我理解可能需要给到用户更有效点的信息，比如渲染之前先做一下 filter 或者合并一些数据，或者分页之类的，起码保证用户看的时候能比较高效地获得信息。

性能的问题也在持续优化中

[Yanyan-Wang]

最近大幅度优化了 dagre 在指定 layer 时的计算性能，欢迎试用

[Yanyan-Wang]

拖拽、缩放画布的卡顿，在大数据量下建议为 drag-canvas zoom-canvas 打开 enableOptimize
https://g6.antv.antgroup.com/manual/middle/states/defaultBehavior#drag-canvas

[yangyili]

@Yanyan-Wang 请问您说的dagre算法的优化，在哪个版本以后呢？我目前用的最新的版本4.8.21. 出现了1500个结点时，图绘制需要大概45s得时间。如果将布局type设置成换成默认的或grid，同样的数据绘制时间可以控制在4s左右。但是只有dagre的布局才能满足业务需求。所以想请教您，关于dagre算法是否还有优化？