antvis/G6

[Bug]: The V5 version of D6 uses the Indented Tree layout, but within the same children, there will be various relationships between multiple nodes, linking edges, which leads to layout confusion #6822

heyushuo posted onGitHub

Describe the bug / 问题描述

[Bug]: D6 的 V5 版本,使用的 缩进树 布局,但是同一个 children 内,多个节点之间也会有各种关系,链接边,这个时候导致布局错乱

https://stackblitz.com/edit/react-o4cjyfnm?file=index.js,data.js,index.html

https://stackblitz.com/edit/react-o4cjyfnm?file=index.js,data.js,index.html

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

No response

Version / 版本

v5

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

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

感谢您报告这个问题。您提到在使用 D6 的 V5 版本时,缩进树布局在同一个 children 内多个节点之间存在各种关系和链接边时会导致布局错乱。我将尝试帮助您解决这个问题。

首先,请确保您使用的是最新版本的 G6,因为有时候问题可能在更新中已被修复。如果问题依然存在,您可以尝试以下步骤:

  1. 检查数据结构:确保数据结构符合缩进树布局的要求,尤其是 children 属性的定义。
  2. 调整布局配置:有时候,调整布局的配置参数可以改善布局效果。您可以尝试修改布局的参数设置。
  3. 自定义布局:如果内置的缩进树布局无法满足需求,您可以考虑自定义布局逻辑。

如果这些方法都不能解决问题,您可以在 GitHub 上创建一个 issue,提供详细的复现步骤和代码示例,以便开发团队进一步调查。

如果您需要进一步的帮助,请随时告诉我。

<details> <summary>🪧 Tips</summary> For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me. </details>

posted by petercat-assistant[bot] about 2 months ago

用dagre布局呢

posted by liukaiming-alipay about 2 months ago

这个数据结构不满足缩进树布局(Indented Tree Layout)的要求,正好是GitHub issue #6822中描述的问题场景。

问题分析

这个数据结构有以下特点:

  1. 混合数据模型:同时包含nodesedges两部分,是一个图数据结构而非纯树结构
  2. 父子关系:通过children属性定义了树形的父子关系
  3. 额外连接边:通过edges数组定义了多种类型的边关系,包括:
    • edgeType: 1 - 业务包含业务分层(与children保持一致的父子关系)
    • edgeType: 3 - 业务分层包含任务类型(与children保持一致的父子关系)
    • edgeType: 4 - 任务类型互斥/流水互斥(非父子关系的额外连接

关键问题

以下几个边关系正是造成问题的原因:

task_type_1 -> task_type_2 (任务类型互斥)
task_type_1 -> task_type_3 (任务类型互斥)
task_type_1 -> task_type_4 (流水互斥)

这些是同级或跨层级节点之间的互斥关系,不是树形的父子关系。缩进树布局算法只考虑父子关系进行排布,无法合理处理这些额外的关系边,因此会导致布局混乱。

解决建议

  1. 使用dagre布局:如issue中liukaiming-alipay所建议的,使用dagre布局更适合这种复杂关系

    layout: {
      type: 'dagre',
      rankdir: 'TB',
      nodesep: 30,
      ranksep: 50
    }
  2. 使用力导向布局:也可以尝试力导向布局,它能更好地处理复杂的图关系

    layout: {
      type: 'force',
      preventOverlap: true,
      linkDistance: 100
    }
  3. 自定义布局:如果需要保持树的视觉风格,又要处理额外的边,可以考虑实现自定义布局

总结:您的数据正好是issue #6822描述的问题场景,应该更换布局算法或调整数据结构。

posted by zhongyunWan about 2 months ago

✅ After careful review, we've determined this is not a bug. Here's why:

  • The current behavior is working as designed
  • This might be a misunderstanding of the feature
  • The issue cannot be reproduced with the provided information

If you still believe this is a bug, please:

  1. Provide a minimal reproduction
  2. Share your expected behavior
  3. Include more detailed environment information

Thank you for helping us improve our project! 💫


✅ 经过仔细核查,这并非一个 bug,原因如下:

  • 当前表现符合设计预期
  • 可能是对功能理解有所偏差
  • 基于已提供信息无法复现问题

如果您仍认为这是一个 bug,建议:

  1. 提供最小复现示例
  2. 说明您期望的表现
  3. 补充更详细的环境信息

期待您的反馈!💫

posted by github-actions[bot] about 2 months ago

Fund this Issue

$0.00
Funded

Pull requests