cytoscape.js初级篇

最新推荐文章于 2024-07-23 00:33:28 发布

此人太懒

最新推荐文章于 2024-07-23 00:33:28 发布

阅读量3.2k

点赞数 3

分类专栏： JS 图渲染 web 文章标签： javascript 前端

本文链接：https://blog.csdn.net/dahaiaixiaohai/article/details/108862390

版权

这篇博客介绍了如何使用Cytoscape.js在前端实现节点和关系的显示、选择、添加与删除操作，主要关注Vue开发环境下的应用。内容包括Cytoscape的依赖安装、组件创建、样式配置、批处理以及测试模板的建立。

摘要由CSDN通过智能技术生成

很久之前写过一篇cytoscape.js基础篇, 地址是https://blog.csdn.net/dahaiaixiaohai/article/details/89669526. 可以适当的参考一下其内容.

本篇章, 正式使用cytoscape.js实现一些简单的节点显示操作, 主要包括节点的选择, 关系的选择, 节点的添加和关系的添加.

本文对应的源代码寄托于github, cytoscape.js初级篇github源代码, 在此感谢github提供的服务.

系列文章

前言

本实例通过Vue开发测试, 其他开发方式可以参考本篇章, 适当的修改后使用.

cytoscape依赖引用

npm : npm install cytoscape --save
bower : bower install cytoscape
jspm : jspm install npm:cytoscape

cytoscape扩展依赖引用

npm 布局及扩展依赖引用

# Cytoscape.js的圆形可滑动上下文扩展菜单
npm install cytoscape-cxtmenu --save
# Cytoscape.js的布局方式
npm install cytoscape-avsdf --save
npm install cytoscape-cola --save
npm install cytoscape-cose-bilkent --save

创建Cytoscape组件

创建Cytoscape模板容器

<template>
  <div style="position: relative; height: 100%; width: 100%; z-index: 0;">
    <div id="cytoscape_id" style="height: 100%; width: 100%; z-index: 1;"></div>
  </div>
</template>

创建Cytoscape实例对象

下载代码中仅截取了cytoscape实例对象的创建部分, 并不是完成内容, 完成内容请参数本篇章最后部分.

<script>
  import cytoscape from 'cytoscape';
  import cxtmenu from 'cytoscape-cxtmenu';
  import cola from 'cytoscape-cola';
  import avsdf from 'cytoscape-avsdf';
  import coseBilkent from 'cytoscape-cose-bilkent';

  mounted() {
   
    if (!cytoscape().cxtmenu) {
   
  	  cytoscape.use(cxtmenu);
  	  cytoscape.use(cola);
  	  cytoscape.use(avsdf);
  	  cytoscape.use(coseBilkent);
    }
  
    this.$cy = cytoscape({
   
      // initial viewport state:
      zoom: 1, // 图表的初始缩放级别.可以设置options.minZoom和options.maxZoom设置缩放级别的限制.
      pan: {
   x: 0, y: 0}, // 图表的初始平移位置.
      // interaction options:
      minZoom: 1e-50, // 图表缩放级别的最小界限.视口的缩放比例不能小于此缩放级别.
      maxZoom: 1e50, // 图表缩放级别的最大界限.视口的缩放比例不能大于此缩放级别.
      zoomingEnabled: true, // 是否通过用户事件和编程方式启用缩放图形.
      userZoomingEnabled: true, // 是否允许用户事件(例如鼠标滚轮,捏合缩放)缩放图形.对此缩放的编程更改不受此选项的影响.
      panningEnabled: true, // 是否通过用户事件和编程方式启用平移图形.
      userPanningEnabled: true, // 是否允许用户事件(例如拖动图形背景)平移图形.平移的程序化更改不受此选项的影响.
      boxSelectionEnabled: true, // 是否启用了框选择(即拖动框叠加,并将其释放为选择).如果启用,则用户必须点击以平移图表.
      selectionType: 'single', // 一个字符串，指示用户输入的选择行为.对于'additive',用户进行的新选择将添加到当前所选元素的集合中.对于'single',用户做出的新选择成为当前所选元素的整个集合.
      touchTapThreshold: 8, // 非负整数,分别表示用户在轻击手势期间可以在触摸设备和桌面设备上移动的最大允许距离.这使得用户更容易点击.
                  // 这些值具有合理的默认值,因此建议不要更改这些选项,除非您有充分的理由这样做.大值几乎肯定会产生不良后果.
      desktopTapThreshold: 4, // 非负整数,分别表示用户在轻击手势期间可以在触摸设备和桌面设备上移动的最大允许距离.这使得用户更容易点击.
                  // 这些值具有合理的默认值,因此建议不要更改这些选项,除非您有充分的理由这样做.大值几乎肯定会产生不良后果.
      autolock: false, // 默认情况下是否应锁定节点(根本不可拖动,如果true覆盖单个节点状态).
      autoungrabify: false, // 默认情况下节点是否不允许被拾取(用户不可抓取,如果true覆盖单个节点状态).
      autounselectify: false, // 默认情况下节点是否允许被选择(不可变选择状态,如果true覆盖单个元素状态).
      // rendering options:
      headless: false, // true:空运行,不显示不需要容器容纳.false:显示需要容器容纳.
      styleEnabled: true, // 一个布尔值,指示是否应用样式.
      hideEdgesOnViewport: true, // 渲染提示,设置为true在渲染窗口时,不渲染边.例如,移动某个顶点时或缩放时,边信息会被临时隐藏,移动结束后,边信息会被执行一次渲染.由于性能增强,此选项现在基本上没有实际意义.
      hideLabelsOnViewport: true, // 渲染提示,当设置为true使渲染器在平移和缩放期间使用纹理而不是绘制元素时,使大图更具响应性.由于性能增强,此选项现在基本上没有实际意义.
      textureOnViewport: true, // 渲染提示,当设置为true使渲染器在平移和缩放期间使用纹理而不是绘制元素时,使大图更具响应性.由于性能增强,此选项现在基本上没有实际意义.
      motionBlur: true, // 渲染提示,设置为true使渲染器使用运动模糊效果使帧之间的过渡看起来更平滑.这可以增加大图的感知性能.由于性能增强,此选项现在基本上没有实际意义.
      motionBlurOpacity: 0.2, // 当motionBlur:true,此值控制运动模糊帧的不透明度.值越高,运动模糊效果越明显.由于性能增强,此选项现在基本上没有实际意义.
      wheelSensitivity: 0.3, // 缩放时更改滚轮灵敏度.这是一个乘法修饰符.因此,0到1之间的值会降低灵敏度(变焦较慢),而大于1的值会增加灵敏度(变焦更快).
      pixelRatio: 'auto', // 使用手动设置值覆盖屏幕像素比率(1.0建议,如果已设置).这可以通过减少需要渲染的有效区域来提高高密度显示器的性能,
                // 尽管在最近的浏览器版本中这是不太必要的.如果要使用硬件的实际像素比,可以设置pixelRatio: 'auto'(默认).
      // DOM容器,决定内容展示的位置,方式一(原生):document.getElementById('xx'),方式二(jQuery):$('#xx')
      container: document.getElementById('cytoscape_id'),
      // 一个指定布局选项的普通对象.
      layout: {
   name: 'random'},
    });
  },
</script>

配置Cytoscape实例对象样式

需要先配置各类节点的样式, 再配置通用样式.

  mounted() {
   
    // ......此处省去$cy Cytoscape实例对象创建部分.
    // 不同节点的样式
    this.$cy
      .style()
      .selector('.classes-A')
      .style({
   'background-color': '#FF0000', 'border-color': '#FF0000', 'border-width': "1px",})
      .selector('.classes-B')
      .style({
   'background-color': '#00FF00', 'border-color': '#00FF00', 'border-width': "1px",})
      .selector('.classes-C')
      .style({
   'background-color': '#0000FF', 'border-color': '#0000FF', 'border-width': "1px",})
      .selector('.classes-D')
      .style({
   'background-color': '#E0E0E0', 'border-color': '#E0E0E0', 'border-width': "1px",})
    ;
    // 通用的样式
    this.$cy.style()
      /*未选择节点样式*/
      .selector('node')
      .style({
   'label': 'data(name)', 'font-size': '10pt', 'width': '8pt', 'height': '8pt'})
      /*已选择节点样式*/
      .selector('node:selected')
      .style({
   'border-color': '#c84e40', 'border-width': "1px",})
      /*未选择节点样式*/
      .selector('edge')
      .style({
   
        'label': 'data(name)',
        'target-arrow-shape': 'triangle-backcurve', /*箭头样式*/
        'target-arrow-size': '1px', /*箭头大小*/
        'target-arrow-color': '#999999', /*箭头颜色*/
        'curve-style': 'bezier', /*线条样式曲线*/
        'line-color': '#999999', /*线条颜色*/
        'width': '1px', /*线条宽度*/
        'font-size':