Cytoscape.js

单项	功能
cy	核心
eles	一个或多个元素（节点和边）的集合
ele	单个元素（节点或边）的集合
nodes	一个或多个节点的集合
node	单个节点的集合
edges	一个或多个边的集合
edge	单个边的集合
layout	布局
ani	动画

创建 cy 核心

const cy = cytoscape({
  // 非常常用的选项
  container: document.getElementById('xxx'), // 容器
  elements: [
     { // node1
      group: 'nodes', // “nodes”表示节点，“edges”表示边
      // 注意，可以为您自动推断组字段，但需要指定它
      // 如果您错误初始化元素，则会给出很好的调试消息
      data: { // 元素数据（在此处放置json可序列化的dev数据）
        id: 'n1', // 每个元素的强制（字符串）id，在未定义时自动分配
        parent: 'nparent', //表示复合节点父id;未定义=>无父级,不是复合节点
        //（`eles.move（）`可以有效地更改`parent`）
      },

      //草稿行数据（通常为临时数据或非序列化数据）
      scratch: {
        _foo: 'bar' // 以下划线为前缀的app字段；扩展字段未固定
      },
    
      position: { // 节点的模型位置（在init上是可选的，在init之后是必填的）
        x: 100,
        y: 100
      },
      renderedPosition: { x: 200, y: 200 }, // 也可以在渲染的屏幕像素中指定位置
      
      selected: false, // 是否选择元素（默认为false）
      selectable: true, // 选择状态是否可变（默认为true）
      locked: false, // 锁定时，节点的位置是不可变的（默认为false）
      grabbable: true, // 用户是否可以抓取和移动节点
      pannable: false, // 拖动节点是否会导致平移而不是抓取

      classes: ['foo', 'bar'], // 元素具有的类名数组（或空格分隔的字符串）

      // 除非绝对必要，否则不要使用“样式”字段
      // 改用样式表
      style: { // 样式特性替代
        'background-color': 'red'
      }
    },

    { // node n2
      data: { id: 'n2' },
    },

    { // node n3
      data: { id: 'n3', parent: 'nparent' },
      position: { x: 123, y: 234 }
    },

    { // 节点父节点
      data: { id: 'nparent' }
    },

    {
      data: {
        id: 'e1',
        // 由于指定了“源”和“目标”，因此推断为边缘：
        source: 'n1', // 源节点id（边缘来自此节点）
        target: 'n2'  // 目标节点id（边缘指向该节点）
        // （`eles.move（）`可以有效地更改`source`和`target`）
      },

      pannable: true // 在边上拖动是否会导致平移
    }
  ],
  style: [ 
    {
      selector: "node",
      style: {
        width: "120px",
        height: '120px',
        img: '',
        label: function (ele) {
          const label = ele.data('meta').name;
          const length = label.length;
          if (length <= 5) {
            // 4 5 4排列
            return label;
          } else {
            return label.substring(0, 5) + "...";
          }
        },
        "text-valign": "bottom",
        "cursor": "pointer",
        'background-image': 'https://live.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg',
        "background-fit": "cover",
        // "background-color": "#fd7510",
        "border-width": 3,
        color: "#000",
        padding: 0,
        "font-size": '30px',
        "text-wrap": "wrap",
        "text-max-width": '60px',
        "overlay-color": "#fff",
        "overlay-opacity": 0,
        "background-opacity": 1,
        "z-index": 99
      },
    },
    {
      selector: "edge",
      style: {
        label: function (ele) {
          const label = ele.data("lable") || ele.data('id');
          const length = label.length;
          if (length <= 5) {
            // 4 5 4排列
            return label;
          } else {
            return label.substring(0, 5) + "...";
          }
        },
        "curve-style": "bezier",
        "control-point-step-size": '20px',
        "arrow-scale": '5px',
        "text-opacity": 1,
        "font-size": '20px',
        "background": 'transparent',
        padding: '20px',
        width: '2px',
        "overlay-opacity": 0,
      },
    },
  ],
  layout: { name: 'grid' /* , ... */ },
  data: { /* ... */ },

  // 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覆盖单个元素状态).

  multiClickDebounceTime: 250,

  // rendering options:
  headless: false, // true:空运行,不显示不需要容器容纳.false:显示需要容器容纳.
  styleEnabled: true, // 一个布尔值,指示是否应用样式.
  hideEdgesOnViewport: false, // 渲染提示,设置为true在渲染窗口时,不渲染边.例如,移动某个顶点时或缩放时,边信息会被临时隐藏,移动结束后,边信息会被执行一次渲染.由于性能增强,此选项现在基本上没有实际意义.
  hideLabelsOnViewport: true, // 渲染提示,当设置为true使渲染器在平移和缩放期间使用纹理而不是绘制元素时,使大图更具响应性.由于性能增强,此选项现在基本上没有实际意义.
  textureOnViewport: true, // 渲染提示,当设置为true使渲染器在平移和缩放期间使用纹理而不是绘制元素时,使大图更具响应性.由于性能增强,此选项现在基本上没有实际意义.
  motionBlur: true, // 渲染提示,设置为true使渲染器使用运动模糊效果使帧之间的过渡看起来更平滑.这可以增加大图的感知性能.由于性能增强,此选项现在基本上没有实际意义.
  motionBlurOpacity: 0.2, // 当motionBlur:true,此值控制运动模糊帧的不透明度.值越高,运动模糊效果越明显.由于性能增强,此选项现在基本上没有实际意义.
  wheelSensitivity: 1, // 缩放时更改滚轮灵敏度.这是一个乘法修饰符.因此,0到1之间的值会降低灵敏度(变焦较慢),而大于1的值会增加灵敏度(变焦更快).
  pixelRatio: 'auto', // 使用手动设置值覆盖屏幕像素比率(1.0建议,如果已设置).这可以通过减少需要渲染的有效区域来提高高密度显示器的性能,
  // 尽管在最近的浏览器版本中这是不太必要的.如果要使用硬件的实际像素比,可以设置pixelRatio: 'auto'(默认).
})

cy 事件

cy.add() // 将指定元素添加到图形中。

cy.add({
    group: 'nodes',
    data: { weight: 75 },
    position: { x: 200, y: 200 }
})
// 以后可以使用对 `eles` 的引用
var eles = cy.add([
  { group: 'nodes', data: { id: 'n0' }, position: { x: 100, y: 100 } },
  { group: 'nodes', data: { id: 'n1' }, position: { x: 200, y: 200 } },
  { group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1' } }
])

cy.remove() // 将 指定元素集合(eles)/选择器选择的集合(selector) 从图形中删除。

• 尽管为该函数指定的元素已从图形中删除，但它们可能仍然存在于内存中。
• 几乎所有的函数都不能在删除的元素上工作。例如，eles。对于删除的元素，neighborhood（）函数将失败：图形上下文之外的元素不能定义邻域。因此您只能将删除的元素还原回原始核心实例或新实例。

cy.collection() // 创建集合

cy.collection() // 创建空集合
cy.collection( eleObjs, options ) // 使用处于移除状态的新元素创建集合。
`eleObjs` 要创建的元素
`options` 选项
  - `removed` 一个true值，用于设置元素是处于删除状态（true）还是添加到图形中（false，默认值）。

例子：

// 保留已单击的节点集合
var collection = cy.collection();
cy.nodes().on('click', function(e){
  var clickedNode = e.target;

  collection = collection.union(clickedNode);
});

// 创建尚未添加到图形中的新节点集合
var removedCollection = cy.collection([{ data: { id: 'a' } }, { data: { id: 'b' } }], { removed: true });

removedCollection.forEach(element => {
  console.log(element.removed()); // true
};

cy.batch() // 允许在不触发多个样式计算或多个重绘的情况下操作元素。

cy.batch( function() )
cy.startBatch()
cy.endBatch()
// 如果已经在同一批中修改了样式，则不能在批中应用任何样式相关操作。常见的样式相关操作包括：
-   布局：`cy.layout()`, `eles.layout()`等。
-   阅读风格：`ele.style()`, `ele.numericStyle()`等。
-   读取尺寸：`ele.midpoint()`, `ele.boundingBox()`等。
-   动画：`ele.animation()`, `cy.animate()`等。
// 处理应对应于单个视觉操作。通常，批处理只应包含对以下函数的调用：
-   正在修改状态: `eles.data()`, `eles.scratch()`, `eles.addClass()`, `eles.removeClass()`等
-   集合: `eles.union()`, `eles.difference()`, `eles.intersection()`等
-   比较: `eles.same()`, `eles.some()`等
-   迭代: `eles.forEach()`, `eles.empty()`等
-   遍历: `node.outgoers()`, `eles.bfs()`等
-   算法: `eles.dijkstra()`, `eles.degreeCentrality()`等

cy.unmount() // 此函数用于将实例从当前容器卸载后设置为无头

cy.destroy() // 显式销毁实例的便利函数。

要删除实例使用的内存，必须删除对该实例的所有引用，以便对其进行垃圾收集

cy.getElementById(id)  // 以一种非常高效的方式从元素ID中获取元素。
cy.$id('id') // 同上
cy.$(selector) // 获取图形中与指定选择器匹配的元素。selector: 元素应匹配的选择器。
cy.elements(selector) // 获取图形中与指定选择器匹配的元素。selector: 元素应匹配的选择器。
cy.filter( selector ) // 同上
cy.filter( function(ele, i, eles) ) // 同上, 对于应该返回的元素返回true的过滤函数。
    // ele:考虑过滤的当前元素。
    // i:用于图中元素迭代的计数器。
    // eles:正在筛选的元素集合
cy.nodes(selector) // 获取图形中与指定选择器匹配的nodes。selector: 元素应匹配的选择器。
cy.edges( selector ) // 获取图形中与指定选择器匹配的edges。selector: 元素应匹配的选择器。

cy.data() // 读取和写入与图形关联的开发人员定义的数据。

cy.removeData() // 删除与元素关联的开发人员定义的数据。

cy.scratch() // 设置或获取草稿行数据，其中可以存储临时或非JSON数据。

cy.removeScratch() // 删除草稿行数据，其中可以存储临时或非JSON数据。

cy.on() / cy.removeListener() // 设置/删除 监听 cy 触发的事件

cy.on('tap', 'node', function(evt){
  var node = evt.target;
  console.log( 'tapped ' + node.id() );
})
// remove all tap listener handlers, including the one above
cy.removeListener('tap')

cy.center(eles) // 将图表平移到集合的中心。 eles：以指定元素为中心。

cy.fit() // 自适应

cy.reset() // 刷新

cy.pan() || cy.panBy() || cy.panningEnabled(布尔值) // 设置或获取平移位置。 || 相对平移 || 获取或设置是否启用平移。

cy.zoom() || cy.zoomingEnabled(布尔值) || cy.userZoomingEnabled(布尔值) // 获取或设置图形的缩放级别 || 获取或设置是否启用图形的缩放。 || 获取或设置是否启用按用户事件缩放（例如，鼠标滚轮、捏按缩放）。

cy.viewport() // 在调用中设置视口状态（平移和缩放）。

cy.resize() // 调整图形的大小并重新绘制

cy.png() || cy.jpg() // 将当前图形视图导出为PNG图像。 || 将当前图形视图导出为jpg图像。

eles

eles.remove() // 从图中删除元素，并返回此调用删除的所有元素。

eles.restore() // 将eles.remove()删除的元素放回图形中

ele.removed() // 获取元素是否已从图形中删除。

ele.inside() // 获取元素是否在图中（即未删除）。

eles.on() // 事件仅绑定到当前现有元素

eles.data() // 读取和写入与元素相关联的开发人员定义的数据

nodes

node.locked() // 获取节点是否已锁定，这意味着其位置无法更改。

nodes.lock() // 锁定节点，使其位置无法更改。

nodes.unlock() // 解锁节点，以便更改其位置。

ele.active() // 获取元素是否处于活动状态（例如，用户点击、抓取等）。

ele.selected() // 获取元素是否被选中。

eles.select() // 选择元素。集合之外的元素不受影响。

eles.unselect() // 使元素不被选中。集合之外的元素不受影响。

ele.selectable() // 获取元素的选择状态是否可变。

eles.selectify() // 使元素的选择状态可变。

eles.unselectify() // 使元素的选择状态不变。

eles.addClass() || eles.removeClass() || eles.toggleClass() // 向元素 添加||删除||切换 类

ele.visible() || ele.hidden() // 获取元素是否可见 || 获取元素是否隐藏。

eles.union() // 获取一个新集合，将该集合与另一个集合一起添加

eles.neighborhood([selector]) || eles.openNeighborhood([selector]) // 获取元素的开放邻域(邻包含域的边)， openNeighborhood不包含原始元素集的邻域。

eles.closedNeighbourhood() // 获取元素的闭合邻域，包含原始元素集的邻域。

nodes.incomers() // 获取进入集合中节点的边（及其源）

nodes.successors() // 递归地获取来自集合中节点的边（以及它们的目标）（即，出局者、出局者的出局者…）。

nodes.predecessors() // 递归地获取进入集合中节点的边（及其源）（即进线、进线的进线…）。

cy.nodes() => eles