IssueHunt两个节点中有多条线，一半红色一半绿色，线重叠 #4518
pupu0520 posted onGitHub
问题描述
// 两个节点中有多条线，一半红色一半绿色，如何不重叠 import G6 from '@antv/g6';
/**
- Extend the built-in line edge and override getPath and getShapeStyle to custom a polyline edge
- by siogo's issue（https://github.com/antvis/g6/issues/814）
- If you want to fit the dragging, you need to adjust the controlpoints while dragging
- /
G6.registerEdge( 'line-arrow', { draw(cfg, group) { const startPoint = cfg.startPoint; const endPoint = cfg.endPoint; const midPoint = { x: startPoint.x + (endPoint.x - startPoint.x) / 2, y: startPoint.y + (endPoint.y - startPoint.y) / 2, }; group.addShape('path', { attrs: { path: [ ['M', startPoint.x, startPoint.y], ['L', midPoint.x, midPoint.y], ], stroke: 'red', lineWidth: 1 }, name: 'path-left', }); group.addShape('path', { attrs: { path: [ ['M', midPoint.x, midPoint.y], ['L', endPoint.x, endPoint.y], ], stroke: 'green', lineWidth: 1 }, name: 'path-right', }); return group; }, update: undefined }, 'line', );
const data = { nodes: [ { id: '7', x: 150, y: 100, size: 40, anchorPoints: [ [1, 0.5], [1, 0], ], }, { id: '8', x: 300, y: 200, size: 40, anchorPoints: [ [0, 0.5], [0, 1], ], }, ], edges: [ { source: '7', target: '8', sourceAnchor: 0, targetAnchor: 0, }, { source: '8', target: '7', sourceAnchor: 0, targetAnchor: 0, }, ], };
const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 500; const graph = new G6.Graph({ container: 'container', width, height, // translate the graph to align the canvas's center, support by v3.5.1 fitCenter: true, modes: { // behavior default: ['drag-node', 'drag-canvas'], }, defaultNode: { type: 'circle', style: { fill: '#DEE9FF', stroke: '#5B8FF9', }, linkPoints: { left: true, right: true, fill: '#fff', stroke: '#1890FF', size: 3, }, }, defaultEdge: { type: 'line-arrow', }, });
graph.data(data); graph.render();
const edges = graph.save().edges; G6.Util.processParallelEdges(edges);
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); };
重现链接
https://g6.antv.antgroup.com/examples/item/customEdge/#customPolyline
重现步骤
问题描述代码
预期行为
不重叠
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
- G6 版本: [4.5.1 ... ]
屏幕截图或视频（可选）
补充说明（可选）
No response
