{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-f143123bf65084c4d30d46d70d094472-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

G6 内置了折线 loop 边，其默认样式如下。
\n\"image.png\"

\n

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

\n

使用方法

\n

如 内置边 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

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

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

2 在数据中动态配置

\n

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

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

配置项说明

\n

自环是指连接单个节点自身的边，是一种边的特殊情况，因此，在通用属性基础上，支持了特殊的配置 loopCfg。

\n

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

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

样式属性 style

\n

Object 类型。配置项与边的通用样式属性相同，见 内置边。下面代码演示在实例化图时全局配置方法中配置 style，以达到下图效果。
\"image.png\"

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

标签文本配置 labelCfg

\n

Object 类型。其配置与边的通用文本配置相同，见 内置边。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

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

自环特殊配置 loopCfg

\n

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

\n\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 loopCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

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