本组件为基于cytoscape的关系图区块。
- 基于数据渲染当前显示的图,添加删除,只要修改数据即可。
- filterByFunction会删除数据,但是会缓存,getAllElements能拿到包含过滤数据的全部数据
- 数据量超过1k,推荐使用cytoscape-d3-force布局,依赖d3-force, 有布局的进度返回
安装依赖包:
npm install vcytoscape
添加插件:
1.1.8及之前版本Vue.use第二个参数option不能为空❗️
import Vue from 'vue';
import vcytoscape from 'vcytoscape';
import d3Force from 'cytoscape-d3-force'
Vue.use(vcytoscape, {
beforeCreate: (Cytoscape) => { // inject plugin for cytoscape
Cytoscape.use(d3Force)
}
});
获取配置的schema ✅
import { nodeSchema, edgeSchema } from 'vcytoscape'
该组件分为三个组件 vcytoscape 、 vcytoscape-legend 、 vcytoscape-setting
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
option | cytoscape原生配置,包括布局, 样式等等;cytoscape文档 | Object | - | {} |
data | cytoscape的图数据 | Array | - | [] |
category | 分类配置,详见下表 | Object | - | {} |
toolbar | 工具栏 | Object | - | {} |
behavior | 默认行为(点击高亮相邻节点) | Boolean | true/false | true |
方法名 | 参数 | 说明 | 返回 |
---|---|---|---|
filterByFunction | Function (elements) { return elements } | 回调函数返回过滤后的元素集合 | filterid |
filterid | 用以重置已有的filterid | - | |
reLayout | 过滤集合后是否需要重新布局,默认false | - | |
resetFilter | filterid | 重置filterid对应的过滤 | - |
reLayout | 过滤集合后是否需要重新布局,默认false | - | |
getAllElements | - | 获取elements集合,当前显示的元素 + 过滤掉的元素集合 | elements |
事件名 | 说明 | 参数 |
---|---|---|
update | cytoscape实例数据更新(包括 数据重置,添加,删除,过滤等等) | cytoscape事件 |
其他详见cytoscape文档: http://js.cytoscape.org/#introduction
name | 说明 |
---|---|
legend | scope参数带有 data 和 category |
toolbar-before | 工具栏(前面) |
toolbar-after | 工具栏 (后面) |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value / v-model | 绑定值 | Object | - | - |
data | cytoscape渲染数据 | Array | - | [] |
option | vue-legend图例配置 | Object | - | {} |
type | 图例类型 | String | nodes/edges | nodes |
category | 图例分类配置 | Object | - | {} |
事件名 | 说明 | 参数 |
---|---|---|
change | 图例变化 | legendMode |
setting | 分类编辑点击事件 | params: { type, name, label } |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value / v-model | 配置表单 | Object | - | - |
schema ✅ | 表单shcema | Array | - | - |
类型 | 参数 | 说明 | 类型 | 可选值 | 默认值 | |
---|---|---|---|---|---|---|
nodes | Array | name | 指定分类项名称 | String | - | - |
matching | 分类项匹配规则 | Function | - | - | ||
style | 分类配色,具体参考cytoscape node颜色属性 | Object | - | - | ||
formatter | 翻译 | Function | - | - | ||
Object | key | 指定获取数据中的某个字段 | String | - | - | |
styles | 为上述style参数的数组或者key的键值对 | Object/Array | - | - | ||
edges | Array | name | 指定分类项名称 | String | - | - |
matching | 分类项匹配规则 | Function | - | - | ||
style | 分类配色,具体参考cytoscape edge颜色属性 | Object | - | - | ||
formatter | 翻译 | Function | - | - | ||
Object | key | 指定获取数据中的某个字段 | String | - | - | |
styles | 为上述style参数的数组或者key的键值对 | Object/Array | - | - |
/**
* 分类配置:两种写法
* 写法一:
* {
* key: 指定获取数据中的某个字段, (1.1.7新增 a.b.c 形式的对象字面量)
* styles: 分类样式,可以为Array/Object键值对
* }
* 写法二:
* [{
* name: '分类1',
* matching: data => data.label === '分类1', // 目前只支持函数
* style, // 具体参考cytoscape官网样式规范
* formatter: name => name // 格式转换,翻译
* }]
* **/
category = {
nodes: [{
name: 'category1',
matching: data => data.label === 'category1', // 目前只支持函数
style: {
'background-color': '#c23531'
},
formatter: name => '分类1'
}],
edges: {
key: 'category',
styles: {
category1: {
'background-color': '#c23531'
},
category1: {
'background-color': '#2f4554'
}
}
}
}
option = {
layout: {
name: 'cose',
randomize: true,
animate: false
},
style: [
{
selector: 'node',
style: {
'background-color': 'rgb(5, 161, 140)',
'background-opacity': 0.6,
'background-image-opacity': 0.6,
'z-index-compare': 'manual',
'z-index': 2
}
}
],
minZoom: 0.5,
maxZoom: 10
}
[{
group: 'nodes',
data: {
id: 'XXX'
}
}, {
group: 'nodes',
data: {
id: 'YYY'
}
}, {
group: 'edges',
data: {
id: 'XXX-YYY',
source: 'XXX',
target: 'YYY'
}]
or
{
nodes: [{
data: {
id: 'XXX'
}
}, {
data: {
id: 'YYY'
}
}],
edges: [{
data: {
id: 'XXX-YYY',
source: 'XXX',
target: 'YYY'
}
}]
}
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
style | 样式 | Object | vue的内联样式 | - |
content | 工具栏显示内容 | Boolean/Array | true: 显示全部默认;false: 不显示默认;可选值:[center,zoomin,zoomout,download,fullscreen] | false |
orient | 工具栏的方向 | String | horizontal/vertical | horizontal |