We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在afterrender函数中动态添加边,并设置边的类型type,不能触发边事件
import G6 from '@antv/g6'; import insertCss from 'insert-css'; const data = { nodes: [ { id: '1', dataType: 'alps', name: '1', layer:1, label:'1' }, { id: '134', dataType: 'alps', name: '134', layer:0, label:'134' }, { id: '2', dataType: 'alps', name: '2', layer:1 }, { id: '3', dataType: 'alps', name: '3', layer:2 }, { id: '6', dataType: 'sql2', name: '6', layer:3, comboId:'F001', }, { id: '7', dataType: 'sql2', name: '7', layer:3, comboId:'F000', }, ], edges: [ { source: '2', target: '3', }, { source: '1', target: '3', }, { source: '134', target: '1', }, { source: '134', target: '2', }, { source: '3', target: '6', }, { source: '3', target: '7', }, ], combos:[{ id:'F000', label:'F000', size:[50], parentId: 'layer_2' },{ id:'F001', label:'F001', size:[50], parentId: 'layer_2' }] }; const comboName = ['运营商','WAN','核心层','汇聚层','有线接入层','无线接入层'] // 根据节点的层级信息计算并添加 combos const layerColors = ['#FFF', '#F2F3F5']; // 轮流的背景颜色 data.nodes.forEach(node => { if (!data.combos.some(combo => combo.id === `layer_${node.layer}`)) { data.combos.push({ id: `layer_${node.layer}`, label: comboName[node.layer], style: { fill: layerColors[node.layer % layerColors.length], // 轮流设置背景颜色 lineWidth: 1, } }); } node.comboId = node.comboId?node.comboId:`layer_${node.layer}`; // 指定节点属于哪个 combo }); data.combos.push({ id: 'side-hanging-layer', label:'旁挂层', size:[50], }); console.log(data) G6.registerNode( 'sql', { drawShape(cfg, group) { const rect = group.addShape('rect', { attrs: { x: -75, y: -25, width: 48, height: 48, radius: 20, label:cfg.label, stroke: '#5B8FF9', fill: '#C6E5FF', lineWidth: 1, }, name: 'rect-shape', }); return rect; }, }, 'single-node', ); const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 500; const graph = new G6.Graph({ container: 'container', width, height, layout: { type: 'dagre', ranksep: 18, controlPoints: true, }, defaultNode: { type: 'sql', size: [48, 48], anchorPoints: [ [0.5, 0], // 顶部中心锚点 [0.5, 1], // 底部中心锚点 ], }, modes: { // default: [ // 'drag-combo', // ], }, defaultEdge: { type: 'cubic-vertical', sourceAnchor: 1, style: { lineWidth: 1, stroke: '#C9CDD4', shadowBlur: 10, }, }, nodeStateStyles: { selected: { stroke: '#d9d9d9', fill: '#5394ef', }, }, defaultCombo: { type: 'rect', size:[1232,14] }, fitView: true, }); graph.data(data); graph.render(); graph.on('afterrender',()=>{ const targerNode = graph.findById('3'); const realModel = targerNode.getModel(); graph.addItem("node", { id: 'shadowNode', x: realModel.x, y: realModel.y, comboId:realModel.comboId, label: '影子节点', anchorPoints: [[0, 0.5], [1, 0.5]], }); graph.findById('shadowNode').hide(); graph.addItem("node", { id: 'add1', x: realModel.x + 200 + 20 * 3, y: realModel.y, anchorPoints: [[0.5, 0], [0.5, 0]], comboId : 'side-hanging-layer' }); graph.addItem("edge", { source: 'shadowNode', target: 'add1', type: 'arc', }); graph.addItem("edge", { source: 'add1', target: '7', type: 'arc', }); graph.addItem("node", { id: 'add11', x: realModel.x + 400 + 20 * 3, y: realModel.y, anchorPoints: [[0.5, 0], [0.5, 0]], comboId : 'side-hanging-layer' }); graph.addItem("edge", { source: 'shadowNode', target: 'add11', type: 'arc', }); }) graph.on('edge:mouseover',(e)=>{ console.log(e) }) if (typeof window !== 'undefined') window.onresize = () => { if (!graph || graph.get('destroyed')) return; if (!container || !container.scrollWidth || !container.scrollHeight) return; graph.changeSize(container.scrollWidth, container.scrollHeight); };
No response
1.在afterrender函数中添加边 2.指定边的type 3.边的事件无法触发
🆕 5.x
macOS
Chrome
The text was updated successfully, but these errors were encountered:
事件绑定的时机需要在 render 之前
Sorry, something went wrong.
No branches or pull requests
Describe the bug / 问题描述
在afterrender函数中动态添加边,并设置边的类型type,不能触发边事件
Reproduction link / 重现链接
No response
Steps to Reproduce the Bug or Issue / 重现步骤
1.在afterrender函数中添加边
2.指定边的type
3.边的事件无法触发
G6 Version / G6 版本
🆕 5.x
Operating System / 操作系统
macOS
Browser / 浏览器
Chrome
Additional context / 补充说明
The text was updated successfully, but these errors were encountered: