vcytoscape v1.4.11

• 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组件

属性

方法

事件

其他详见cytoscape文档: http://js.cytoscape.org/#introduction

插槽

vcytoscape-legend

-属性-

-事件-

vcytoscape-setting

属性-

附录说明

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