IssueHuntG6 Graph 距离太远 #4613
laibin-wang posted onGitHub
问题描述
两个红色框框距离太远
重现链接
重现步骤
直接运行demo
预期行为
两块离得紧一点 不重叠
平台
- 操作系统: Windows
- 网页浏览器: Google Chrome
- G6 版本:4.5.1
屏幕截图或视频（可选）
两个红色框框距离太远
补充说明（可选）
后端返回node 和edgs 画图 出现两块并且距离很远
代码 <!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>
<body> <div class="container"> <div id="container"></div> </div> <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.8.7/dist/g6.min.js"></script> <script> let data = { nodes: [ { id: 'node1', type: 'a', label: 'D3' }, { id: 'node2', type: 'a', label: 'K-Deilver...', }, { id: 'node3', type: 'a', label: 'P-SuperAP...', }, { id: 'node4', type: 'a', label: 'K-SuperAP...', }, { id: 'node5', type: 'a', label: 'DSC', }, { id: 'node6', type: 'a', label: 'K-Preorde...', }, { id: 'node7', type: 'a', label: 'Enterpris...', }, { id: 'node8', label: 'Security...', }, { id: 'node9', label: 'Security-...', }, { id: 'node10', label: 'Consumer-...', }, { id: 'node11', label: 'Consumer111...', }, ], edges: [ { source: 'node11', target: 'node1', }, { source: 'node11', target: 'node1', }, { source: 'node11', target: 'node5', }, { source: 'node11', target: 'node5', }, { source: 'node5', target: 'node9', }, { source: 'node4', target: 'node9', }, { source: 'node3', target: 'node9', }, { source: 'node2', target: 'node9', }, { source: 'node2', target: 'node9', }, { source: 'node2', target: 'node9', }, { source: 'node1', target: 'node2', }, { source: 'node1', target: 'node2', }, { source: 'node1', target: 'node2', }, { source: 'node1', target: 'node2', }, { source: 'node7', target: 'node8', }, { source: 'node6', target: 'node9' }, { source: 'node6', target: 'node9' }, { source: 'node9', target: 'node10' }, { source: 'node9', target: 'node10' }, { source: 'node9', target: 'node10' }, ], }; const styleObj = { defaultNode: { size: 40, }, defaultEdge: { style: { startArrow: false, endArrow: { /// 使用内置箭头实现 path: G6.Arrow.vee(6, 10, 0), d: 0 }, stroke: '#5B8FF9', labelCfg: { style: { fillOpacity: 1 } }, }, type: 'quadratic' } } const graph = new G6.Graph({ container: 'container', width: 400, height: 300, modes: { default: ['drag-node', 'drag-canvas', 'zoom-canvas'], }, linkCenter: true, fitView: true, fitViewPadding: [20, 20], groupByTypes: false, layout: { type: 'comboCombined', }, defaultNode: styleObj.defaultNode, defaultEdge: styleObj.defaultEdge, }) G6.Util.processParallelEdges(data.edges, 8, 'quadratic'); graph.data(data); graph.render(); </script> </body> <style> .container { position: relative; }
#container { border: 1px solid red; width: 400px; height: 300px; margin: auto; } </style>
</html>
