vcytoscape

- [vcytoscape](#vcytoscape) * [案例](#案例) * [快速上手](#快速上手) * [包含组件](#包含组件) * [vcytoscape组件](#vcytoscape组件) + [属性](#属性) + [方法](#方法) + [事件](#事件) + [插槽](#插槽) * [vcytoscape-legend](#vcytoscape-legend) + [属性](#-属性-) + [事件](#-事件-)

Usage no npm install needed!

<script type="module">
  import vcytoscape from 'https://cdn.skypack.dev/vcytoscape';
</script>

README

vcytoscape

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

vcytoscape组件

属性

参数 说明 类型 可选值 默认值
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 工具栏 (后面)

vcytoscape-legend

-属性-

参数 说明 类型 可选值 默认值
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 }

vcytoscape-setting

属性-

参数 说明 类型 可选值 默认值
value / v-model 配置表单 Object - -
schema ✅ 表单shcema Array - -

附录说明

category

类型 参数 说明 类型 可选值 默认值
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

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
}

data

[{
  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'
    }
  }]
}

toolbar

参数 说明 类型 可选值 默认值
style 样式 Object vue的内联样式 -
content 工具栏显示内容 Boolean/Array true: 显示全部默认;false: 不显示默认;可选值:[center,zoomin,zoomout,download,fullscreen] false
orient 工具栏的方向 String horizontal/vertical horizontal