#7671·G6

[Bug]: dagre布局,polyline类型的edge,endArrow方向反了

Author: ImKZhuCreated Jul 24, 2026Updated Jul 24, 2026
Labelswaiting for maintainer

Describe the bug / 问题描述

Image
javascript
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 / 其他