本组件为基于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 |