antvis / G6

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

If the dot ID is in the format 0-1, the dot will not be displayed #6479

Closed xiaoxiaofu1 closed 2 weeks ago

xiaoxiaofu1 commented 2 weeks ago

Describe the bug / 问题描述

image 如上图0-1和0-2不显示 ![Uploading image.png…]() 这种就可以

Reproduction link / 重现链接

No response

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

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

const data = { nodes: [ { id: '0', layer: 0 }, { id: '1', layer: 1 }, { id: '2', layer: 1 }, { id: '-1', layer: -1 }, { id: '-2', layer: -1 }, { id: '0-1', layer: 0 }, { id: '0-2', layer: 0 },
], edges: [ { source: '0', target: '1' }, { source: '0', target: '2' }, { source: '-1', target: '0' }, { source: '-2', target: '0' }, ], };

const graph = new Graph({ container: 'container', autoFit: 'view', animation: false, data, layout: { type: 'antv-dagre', rankdir: 'LR', nodeSize: [60, 30], nodesep: 60, ranksep: 40, controlPoints: true, }, node: { type: 'rect', style: { size: [60, 30], radius: 8, labelText: (d) => d.id, labelBackground: true, } }, edge: { type: 'polyline', }, behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'], });

graph.render();

window.addPanel((gui) => { const config = { layout: 'default' }; const layouts = { default: { type: 'antv-dagre', nodesep: 100, ranksep: 70, controlPoints: true }, LR: { type: 'antv-dagre', rankdir: 'LR', align: 'DL', nodesep: 50, ranksep: 70, controlPoints: true }, 'LR&UL': { type: 'antv-dagre', rankdir: 'LR', align: 'UL', controlPoints: true, nodesep: 50, ranksep: 70 }, };

gui.add(config, 'layout', Object.keys(layouts)).onChange(async (layout) => { graph.setLayout(layouts[layout]); await graph.layout(); graph.fitCenter(); }); });

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

macOS

Browser / 浏览器

Chrome

Additional context / 补充说明

No response

Aarebecca commented 2 weeks ago

当边没有 id 时,会默认使用 `${source}-${target}` 创建默认 id,这里你的节点和边默认生成 id 重复了,导致异常