• vcytoscape
  • 案例
  • 快速上手
  • 包含组件
  • vcytoscape组件
    • 属性
    • 方法
    • 事件
    • 插槽
  • vcytoscape-legend
    • 属性
    • 事件
  • vcytoscape-setting
    • 属性
  • 附录说明
    • category
    • option
    • data
    • toolbar

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 |

方法

事件

事件名 | 说明 | 参数 :-: | :-: | :-: 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

/**
 * 分类配置：两种写法
 * 写法一：
 * {
 *   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 |