antvis/G6


The issue has been closed
[Bug]: Setting offsetX and offsetY in getLabelStyle does not take effect #6814
zmbxy posted onGitHub
Describe the bug / 问题描述
自定义边,在getLabelStyle中设置offsetX、offsetY不生效
import { BaseEdge, ExtensionCategory, Graph, register } from '@antv/g6';
class PolylineEdge extends BaseEdge {
getKeyStyle(attributes) {
return { ...super.getKeyStyle(attributes), lineWidth: 2, stroke: '#000' };
}
getLabelStyle(attributes) {
const labelStyle = {
...super.getLabelStyle(attributes),
offsetX: 30,
offsetY: 30,
}
console.log(labelStyle);
return labelStyle;
}
drawLabelShape(attributes, container) {
const style = this.getLabelStyle(attributes);
this.upsert('label', Label, style, container);
}
getKeyPath(attributes) {
const [sourcePoint, targetPoint] = this.getEndpoints(attributes);
return [
['M', sourcePoint[0], sourcePoint[1]],
['L', targetPoint[0] / 2 + (1 / 2) * sourcePoint[0], sourcePoint[1]],
['L', targetPoint[0] / 2 + (1 / 2) * sourcePoint[0], targetPoint[1]],
['L', targetPoint[0], targetPoint[1]],
];
}
}
register(ExtensionCategory.EDGE, 'custom-polyline', PolylineEdge);
const graph = new Graph({
container: 'container',
data: {
nodes: [
{ id: 'node-0', style: { x: 100, y: 100, ports: [{ key: 'right', placement: [1, 0.5] }] } },
{ id: 'node-1', style: { x: 250, y: 200, ports: [{ key: 'left', placement: [0, 0.5] }] } },
],
edges: [{ source: 'node-0', target: 'node-1' }],
},
edge: {
type: 'custom-polyline',
style: {
startArrow: true,
endArrow: true,
stroke: '#000',
labelText: '12313',
},
},
behaviors: ['drag-element'],
});
graph.render();
<img width="1221" alt="Image" src="https://github.com/user-attachments/assets/453f2700-a8a6-4481-b0f0-bdcc67aafe55" />
预期:
<img width="1136" alt="Image" src="https://github.com/user-attachments/assets/81ddb953-f04f-48ef-a82c-f5feb759b94d" />
Reproduction link / 复现链接
No response
Steps to Reproduce the Bug or Issue / 重现步骤
No response
Version / 版本
🆕 5.x
OS / 操作系统
- macOS
- Windows
- Linux
- Others / 其他
Browser / 浏览器
- Chrome
- Edge
- Firefox
- Safari (Limited support / 有限支持)
- IE (Nonsupport / 不支持)
- Others / 其他