URelationsDiagram 关系图

- 示例
- 基本用法
- 图例与配色
- 节点形状
- 曲线类型
- 箭头类型
- 自定义样式
- 事件
- 配置
- 复杂示例
- [API]()
- Props/Attrs
- Slots
- Events

基于 Cytoscape.js，传入节点和边的数据来表达各种关系的 Canvas 图。

示例

$3

在data属性中传入nodes和edges的数据。

使用layout属性设置布局，可选项有：
- null
- random
- preset
- grid
- circle
- concentric
- breadthfirst
- cose

但一般需要设置布局参数，详见 Cytoscape.js - Layouts。

对原始 Cytoscape.js 节点做了简化：

`` ts
interface node {
id: string, // 节点 id
label: string, // 节点标签，如果不填按 id 显示
parent: string, // 组合方式中的父节点
color: string, // 配色
position: { x: number, y: number }, // 初始化位置
};
interface edge {
id: string, // 节点 id 和名称
source: string, // 起始节点
target: string, // 目标节点
color: string, // 配色
label: string, // 边的标签
'source-label': string, // 边的起始标签
'target-label': string, // 边的结束标签
curve: string, // 曲线类型
'source-arrow': string, // 边的起始箭头类型
'target-arrow': string, // 边的结束箭头类型
'mid-source-arrow': string, // 边的中间起始箭头类型
'mid-target-arrow': string, // 边的中间结束箭头类型
};
`

` html

`

$3

使用legend属性添加图例，使用color属性设置节点或边的颜色。

本组件根据 Cloud UI 主题适配了一套配色方案。

` html

`

$3

在 node 对象中，使用shape参数指定节点类型。默认为rectangle。

shape 的各种类型请直接看下面的示例，其它说明详见 Cytoscape.js - Node shape。

` html

`

$3

在 edge 对象中，使用curve参数指定曲线类型。默认为bezier曲线。

curve 可选类型：
- bezier：集束贝塞尔曲线，对于相同节点之间平行的贝塞尔曲线，会通过调整曲率使它们分型。
- unbundled-bezier：非集束贝塞尔曲线，用于手动控制点。
- haystack：草堆线，一般用于快速绘制两个节点之间的直线。不支持组合父节点，不能使用起始和结束箭头。
- straight：普通直线。
- segments：分段折线
- taxi：直角线

具体说明详见 Cytoscape.js - Edge line。

本组件的 edge 类型的参数是对 curve 的使用方式做了简化，如果需要对曲线的参数进一步设置，请使用element-style自定义样式。

` html

`

$3

在 edge 对象中，使用source-arrow参数指定边起始箭头类型，使用source-arrow参数指定边结束箭头类型。

默认source-arrow为空，target-arrow为triangle。

箭头的各种类型请直接看下面的示例，其它说明详见 Cytoscape.js - Edge arrow。

` html

`

$3

使用element-style属性对本组件的默认样式进行覆盖和扩展。样式设置详见 Cytoscape.js - Style。

` html

`

$3

透传所有 Cytoscape.js 事件，一般通过e.target获取到 Cytoscape 元素进行处理。事件对象详见 Cytoscape.js - Events。

下面是一个给节点绑定 click 事件的例子：

` vue


`

$3

配置 Cytoscape.js 选项。

本组件按照常用习惯，配置了一些默认参数。

` js
{
userZoomingEnabled: false, // 禁止用户放大缩小，因为该功能经常与滚动冲突。如果需要，开发者可以将这个配置打开。
minZoom: 0.5, // 缩放的最小倍数
maxZoom: 2, // 缩放的最大倍数
}
`

其它参数详见 Cytoscape.js - Initialisation。

比如下面的配置禁用了移动位置、开启了方框选择。

` vue