[Bug]: 自定义transform与预期不一致

[fishman1270]

Describe the bug / 问题描述

自定义transform针对DrawData数据进行处理后，视图正常按照处理后的数据渲染。
通过graph.getData导出视图数据发现数据与transform处理后的数据不一致。

Reproduction link / 复现链接

https://stackblitz.com/edit/xrrhjvx1?file=index.js

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[github-actions]

@fishman1270 您好！以下是关于您问题的自动回复：

您好，感谢反馈关于自定义 transform 与导出数据不一致的问题！您的描述很清晰，下面为您详细解答和建议：

---

🧐 问题分析

1. 为什么 graph.getData 导出的数据和 transform 处理后的数据不一致？

• G6 的 transform 机制：transform（数据转换器）是在渲染前对 DrawData 进行临时处理，用于调整、过滤或映射视图数据（如隐藏孤立节点、映射尺寸等）。
• graph.getData 获取的是原始数据：该方法返回的是初始传入的全部节点、边、combo 等数据，并不会包含 transform 处理后的变化。

换句话说，transform 只影响【渲染视图】，不修改底层的数据源。

---

2. 自定义 transform 如何处理 DrawData？

• 您的 transform（如 HideFreeNode）会在 beforeDraw 生命周期阶段对 DrawData 进行筛选、调整，仅作用于本次渲染。
• 这些处理不会同步回 graph 内部的数据，因此 graph.getData 仍然返回最初的数据。

示例代码（仅影响视图）：

class HideFreeNode extends BaseTransform {
  beforeDraw(input, context) {
    // 只影响渲染，不修改 graph 数据
    // 隐藏无连线节点
  }
}

---

3. 如何正确导出 transform 后的数据？

推荐方案

• 如果需要导出实际视图上展示的数据（即经过 transform 处理的数据），目前 G6 没有直接提供 "getTransformedData" 方法。
• 您可以：
  • 在 transform 的生命周期内自行保存处理后的数据（如在 beforeDraw 返回的数据结构中）。
  • 或者通过 graph.getElementData(ids) 来获取当前已渲染元素的数据。

// 获取当前渲染的节点、边等（需自行维护 ID 列表）
const nodeIds = graph.getNodes().map(node => node.getID());
const nodesData = graph.getElementData(nodeIds);

• 若需要完整导出 transform 后的数据，建议在 transform 处理后，将结果保存到变量，并自行实现导出逻辑。

---

✅ 结论 & 建议

• graph.getData 始终返回原始数据，transform 只影响渲染，不会修改数据源。
• 如需导出 transform 后的数据，需在 transform 内部或渲染后自行收集处理结果。
• 或者考虑向 G6 官方提出 feature request 支持导出 transform 后的数据。

---

📚 相关文档

• G6 数据 transform 机制
• 自定义 transform 示例
• graph.getData API

---

如仍有疑问，欢迎补充您的代码片段或具体需求，我们会进一步协助！
感谢您对 G6 的支持！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[fishman1270]

如何才能正确使用transform呢？我观察官方提供的内置平行边transform处理后的数据是可以影响graph.getData导出的数据的，但是自己编写的却不行。是因为使用的方式不对吗？

[github-actions]

@fishman1270 您好！以下是关于您问题的自动回复：

您好，感谢反馈关于自定义 transform 与数据不一致的问题！

根据您的描述：

• transform 针对 DrawData 处理后，视图渲染正常；
• 但通过 graph.getData() 导出的数据与 transform 处理后的数据不一致。

原因分析

G6 的 transform（包括自定义 transform）主要用于渲染前的数据处理，如过滤节点、调整边等，这些处理仅影响视图渲染的数据流，但不会直接修改原始数据（即通过 graph.getData() 获取的数据）。
这保证了原始业务数据的完整性和可追溯性。

具体表现为：

• transform 影响的是渲染流程的数据快照，如 DrawData；
• graph.getData() 始终返回原始业务数据（如最初 setData 或 addData 传入的数据），不会反映 transform 的处理结果。

这是 G6 的设计原则，方便区分“原始数据”与“渲染快照”，便于回溯和复用。

如何导出 transform 处理后的数据？

目前 G6 没有直接暴露“渲染后快照数据”导出 API。
如需导出视图实际渲染的数据，有两种常用方案：

1. 自行在 transform 中保存处理结果
   在自定义 transform 的处理函数（如 beforeDraw）内，将处理后的数据拷贝到外部变量或 context，供后续导出。

2. 导出绘制后的图片
   如果仅需视图最终效果，可以用 graph.toDataURL() 导出图片：

   const url = await graph.toDataURL({ mode: 'overall', type: 'image/png' });

推荐做法

• 业务数据导出：继续用 graph.getData()，保证数据一致性。
• 视图快照导出：如需导出经过 transform 处理的数据，建议在 transform 内自行收集、保存，或讨论是否有必要将其作为新特性提交（欢迎在 issue 中补充需求）。

参考文档

• G6 transforms 配置与原理
• graph.getData 文档
• 自定义 transform 示例
• 导出图片 API

---

如需进一步帮助，欢迎补充您的 transform 代码片段或详细需求。
感谢您的支持！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[github-actions]

@fishman1270 您好！以下是关于您问题的自动回复：

您好，感谢反馈自定义 transform 后导出数据与预期不一致的问题。以下是详细分析及建议：

---

🕵️‍♂️ 问题分析

1. 自定义 transform 处理流程

G6 的自定义 transform 会在 渲染前对原始 DrawData 进行处理（如节点、边的属性变换），影响最终的视图效果。例如：

graph.setTransforms([
  {
    type: 'process-parallel-edges',
    key: 'my-process-parallel-edges',
    distance: 20,
  },
]);

transform 仅作用于视图渲染阶段，不会直接修改底层数据源。

---

2. graph.getData 导出数据的机制

graph.getData() 返回的是图的原始数据结构（如 nodes、edges、combos），而非 transform 处理后的渲染数据。换句话说，transform 只影响展示，不会同步到 getData() 导出的结果。例如：

const data = graph.getData();
// data 仅包含 setData/setTransforms 前的原始数据

---

3. 数据不一致原因

• 渲染数据（DrawData）：经过 transform 处理，视图已变化。
• 导出数据（getData）：仍是原始数据，未包含 transform 的处理结果。

这种分离是 G6 数据处理逻辑的设计，确保数据源与视图变换逻辑解耦。

---

✅ 解决方案建议

如需 导出与 transform 处理后一致的数据，可采用以下方案：

1. 在 transform 后同步更新底层数据

   • 使用 graph.updateData() 或 graph.setData()，将 transform 结果写回数据源。
   • 示例：

     // transform 处理后，手动更新 graph 数据
     graph.updateData({
       nodes: transformedNodes,
       edges: transformedEdges,
     });

2. 自定义数据导出工具

   • 若 transform 逻辑复杂，可将处理结果缓存，并在导出时直接用缓存数据。

3. 建议流程

   • 先用 transform 处理 DrawData
   • 再用 updateData/setData 将变更同步到 graph
   • 最后用 getData 导出，此时数据一致

---

📚 参考文档

• 自定义 transform 配置
• Graph.getData() & 数据更新
• Graph.updateData() 用法

---

🔎 其他建议

• 检查 transform 是否只影响视图，不修改原始数据。
• 如需导出“视图一致”的数据，务必同步底层数据。

如需代码示例或进一步帮助，请补充具体 transform 配置与数据结构。

---

感谢您的反馈，欢迎随时补充更多信息！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[fishman1270]

我查看了@antv/g6/src/transforms/process-parallel-edges.ts源码，没有发现更新graph数据的地方，是因为内置transform的更新逻辑都统一编写在别的地方了吗？
如果我需要针对自己transform更新graph的数据，这个graph.updateData方法应该写在哪个地方比较合适？

[XiaoMing-xmg666]

@fishman1270 transform 里直接更新input里的数据，只会影响渲染数据，如果你想同时更新 getData里的数据，需要手动更新一下，比如：

这样就能拿到你期望的数据了（更新时机可以根据情况调整）

至于你提到的 平行边，它的数据更新逻辑在这里

[fishman1270]

@XiaoMing-xmg666 感谢回复，我刚才又去翻了翻文档，目前打算在GraphEvent.AFTER_DRAW里面通过事件监听，过滤掉变更前后相同的节点和连线，再进行批量更新。
reassignTo这个方法也只是替换了input中的数据，没有手动更新graph的数据，所以我才比较诧异为什么我自己更新input中的数据的时候，graph中的数据却没有变。