[Bug]: dagre布局,polyline类型的edge,endArrow方向反了
Author: ImKZhuCreated Jul 24, 2026Updated Jul 24, 2026
Labelswaiting for maintainer
Describe the bug / 问题描述
import { Graph } from '@antv/g6';
// 1. 准备数据
const data = {
nodes: [
{ id: 'node1', data: { label: '节点1' } },
{ id: 'node2', data: { label: '节点2' } },
{ id: 'node3', data: { label: '节点3' } },
{ id: 'node4', data: { label: '节点4' } },
],
edges: [
{ source: 'node1', target: 'node2' },
{ source: 'node2', target: 'node3' },
{ source: 'node2', target: 'node4' },
],
};
// 2. 初始化图表实例
const graph = new Graph({
container: 'container', // 对应 HTML 中的 <div id="container"></div>
autoFit: 'view', // 自动适配视图
data,
// 3. 配置横向布局 (LR: Left to Right)
layout: {
type: 'dagre',
rankdir: 'LR', // 从左向右横向排列
nodesep: 20, // 节点间距
ranksep: 50, // 层级间距
},
// 4. 配置节点样式
node: {
type: 'rect',
style: {
labelText: (d) => d.data.label,
fill: '#5B8FF9',
stroke: '#5B8FF9',
radius: 4,
labelFill: '#fff',
labelFontSize: 14,
},
},
// 5. 配置默认边为直角折线
edge: {
type: 'polyline', // 折线
style: {
stroke: '#91cc75',
lineWidth: 2,
endArrow: true, // 1. 必须先显式开启
endArrowType: 'vee', // 2. (G6 v5 特有) 指定箭头类型
endArrowSize: 10, // 3. (G6 v5 特有) 指定箭头大小
zIndex:999
},
},
// 6. 开启基础交互行为
behaviors: ['drag-canvas', 'drag-node'],
});
// 7. 渲染图
graph.render();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 / 其他
Source: antvis/G6