Loop

阅读时间约 6 分钟

G6 内置了折线 loop  边,其默认样式如下。
img

⚠️ 注意:
loop 边适用于自环边,即起始点与结束点为相同节点的边,在不同端点的边上适用 loop 边将会出现异常效果。
img

使用方法

内置边  一节所示,配置边的方式有两种:配置边的方式有三种:实例化图时全局配置,在数据中动态配置,使用 graph.edge(edgeFn) 函数配置。这几种配置方法可以同时使用,优先级:

使用 graph.edge(edgeFn) 配置 > 数据中动态配置 > 实例化图时全局配置

⚠️ 注意:idsourcetargetlabel 应当配置到每条边数据中外,其余的 边的通用属性 以及各个边类型的特有属性(见内置边类型)均支持三种配置方式。

1 实例化图时全局配置

用户在实例化 Graph 时候可以通过 defaultEdge 指定 type'loop',即可使用 loop  边。需要注意的是,如果图上存在非自环边,loop 将会表现异常。因此不建议在存在非自环边的图上使用此全局配置方法。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultEdge: {
    type: 'loop',
    // 其他配置
  },
});

2 在数据中动态配置

如果需要使不同节点有不同的配置,可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据,也可以通过遍历数据的方式写入。

const data = {
  nodes: [
    ... // 节点
  ],
  edges: [{
    source: 'node0',
    target: 'node0'
    type: 'loop',
    ... // 其他配置
    style: {
      ...  // 样式属性,每种边的详细样式属性参见各边文档
    }
  },
    ... // 其他边
  ]
}

配置项说明

自环是指连接单个节点自身的边,是一种边的特殊情况。支持 边通用配置项,以下表格对部分常用配置项进行说明。在通用属性基础上,支持了特殊的配置 loopCfg

loop 边支持以下的配置项,对于 Object 类型的配置项将在后面有详细讲解:

名称含义类型备注
color边的颜色String优先级低于 style 中的 stroke
style边的样式ObjectCanvas 支持的属性
style.endArrow边结束端是否有箭头Boolean默认为 false
label标签文本文字String
labelCfg标签文本配置项Object
loopCfg自环特殊配置Object

样式属性 style

Object 类型。配置项与 边通用样式属性 相同。下面代码演示在实例化图时全局配置方法中配置 style,以达到下图效果。
img

const data = {
  nodes: [
    {
      id: 'node0',
      x: 100,
      y: 100,
      size: 20,
    },
  ],
  edges: [
    {
      source: 'node0',
      target: 'node0',
      type: 'loop',
      label: 'loop',
    },
  ],
};
const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultEdge: {
    // type: 'loop',  // 在数据中已经指定 type,这里无需再次指定
    style: {
      endArrow: true,
      stroke: '#088',
      lineWidth: 3,
    },
  },
});
graph.data(data);
graph.render();

标签文本配置 labelCfg

Object 类型。支持 边通用标签配置。基于上面 样式属性 style 中的代码,下面代码在 defaultEdge 中增加了  labelCfg  配置项进行文本的配置,使之达到如下图效果。
img

const data = {
  // ... data 内容
};
const graph = new G6.Graph({
  // ... 图的其他配置
  defaultEdge: {
    // ... 其他配置
    labelCfg: {
      refY: -5,
      refX: 30,
    },
  },
});
// ...

自环特殊配置  loopCfg

Object 类型。通过 loopCfg  配置自环的方位、高度、顺逆时针。

  • position: 指定自环与节点的相对位置。默认为:top。支持的值有:toptop-rightright,bottom-rightbottombottom-leftlefttop-left
  • dist: 从节点 keyShape 的边缘到自环最顶端的位置,用于指定自环的曲度,默认为节点的高度。
  • clockwise: 指定是否顺时针画环,默认为  true

基于上面 样式属性 style 中的代码,下面代码在 defaultEdge 中增加了  loopCfg  配置项进行文本的配置,使之达到如下图效果。
img

const data = {
  // ... data 内容
};
const graph = new G6.Graph({
  // ... 图的其他配置
  defaultEdge: {
    // ... 其他配置
    loopCfg: {
      position: 'left',
      dist: 100,
      clockwise: false,
    },
  },
});
// ...