antvis / G6

♾ A Graph Visualization Framework in JavaScript.
https://g6.antv.antgroup.com/
MIT License
11.03k stars 1.31k forks source link

[v5] 在 antv-dagre布局下,edge从node指向combo,感觉combo就不参与布局了 #5991

Closed Ryuurock closed 2 months ago

Ryuurock commented 2 months ago

Describe the bug / 问题描述

如题,可以将下面的代码粘贴到这里 https://g6-next.antv.antgroup.com/zh/examples/layout/dagre/#antv-dagre-combo 期望能够和上述链接打开有相似的效果 image

import { Graph } from '@antv/g6';

fetch('https://assets.antv.antgroup.com/g6/dagre-combo.json')
  .then((res) => res.json())
  .then((data) => {
    data = {
  "nodes": [
    {
      "id": "0"
    },
    {
      "id": "1"
    },
    {
      "id": "2"
    },
    {
      "id": "3"
    },
    {
      "id": "4",
      "combo": "A"
    },
    {
      "id": "5",
      "combo": "B"
    },
    {
      "id": "6",
      "combo": "A"
    },
    {
      "id": "7",
      "combo": "C"
    },
    {
      "id": "8",
      "combo": "C"
    },
    {
      "id": "9",
      "combo": "A"
    },
    {
      "id": "10",
      "combo": "B"
    },
    {
      "id": "11",
      "combo": "B"
    }
  ],
  "edges": [
    {
      "id": "edge-102",
      "source": "0",
      "target": "1"
    },
    {
      "id": "edge-161",
      "source": "0",
      "target": "2"
    },
    {
      "id": "edge-237",
      "source": "1",
      "target": "4"
    },
    {
      "id": "edge-253",
      "source": "0",
      "target": "3"
    },
    {
      "id": "edge-133",
      "source": "3",
      "target": "4"
    },
    {
      "id": "edge-320",
      "source": "2",
      "target": "B"
    },
    {
      "id": "edge-355",
      "source": "1",
      "target": "6"
    },
    {
      "id": "edge-823",
      "source": "1",
      "target": "7"
    },
    {
      "id": "edge-665",
      "source": "3",
      "target": "8"
    },
    {
      "id": "edge-884",
      "source": "3",
      "target": "9"
    },
  ],
  "combos": [
    {
      "id": "A",
      "style": {
        "type": "rect"
      }
    },
    {
      "id": "B",
      "style": {
        "type": "rect"
      }
    },
    {
      "id": "C",
      "style": {
        "type": "rect"
      }
    }
  ]
}
    const graph = new Graph({
      container: 'container',
      autoFit: 'view',
      data,
      node: {
        type: 'rect',
        style: {
          size: [60, 30],
          radius: 8,
          labelText: (d) => d.id,
          labelPlacement: 'center',
          ports: [{ placement: 'top' }, { placement: 'bottom' }],
        },
        palette: {
          field: (d) => d.combo,
        },
      },
      edge: {
        type: 'cubic-vertical',
        style: {
          endArrow: true,
        },
      },
      combo: {
        type: 'rect',
        style: {
          radius: 8,
          labelText: (d) => d.id,
          lineDash: 0,
          collapsedLineDash: [5, 5],
        },
      },
      layout: {
        type: 'antv-dagre',
        ranksep: 50,
        nodesep: 5,
        sortByCombo: true,
      },
      behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
    });

    graph.render();
  });

Reproduction link / 重现链接

No response

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

No response

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

macOS

Browser / 浏览器

Chrome

Additional context / 补充说明

No response

Aarebecca commented 2 months ago

正如 https://github.com/antvis/G6/issues/5988 中提到,目前 antv-dagre 布局并不会处理 node 连接到 combo 的情况,因此你可能并不难使用 antv-dagre 处理你的数据结构,或者你可以针对该情况进行布局定制。

Ryuurock commented 2 months ago

@Aarebecca 有基于antv-dagre布局进行扩展或定制的示例吗