Closed Ryuurock closed 2 months ago
如题,可以将下面的代码粘贴到这里 https://g6-next.antv.antgroup.com/zh/examples/layout/dagre/#antv-dagre-combo 期望能够和上述链接打开有相似的效果
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(); });
No response
🆕 5.x
macOS
Chrome
正如 https://github.com/antvis/G6/issues/5988 中提到,目前 antv-dagre 布局并不会处理 node 连接到 combo 的情况,因此你可能并不难使用 antv-dagre 处理你的数据结构,或者你可以针对该情况进行布局定制。
@Aarebecca 有基于antv-dagre布局进行扩展或定制的示例吗
Describe the bug / 问题描述
如题,可以将下面的代码粘贴到这里 https://g6-next.antv.antgroup.com/zh/examples/layout/dagre/#antv-dagre-combo 期望能够和上述链接打开有相似的效果
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