博客

cytoscapeJS是用于可视化和分析的图论（网络）库

具体的功能API等详细内容需要看官网，这里只是简单的介绍，起抛砖引玉的作用

1.安装

// windows 下安装
npm : npm install cytoscape

2.手势

Cytoscape.js支持几种手势：

抓取并拖动背景进行平移：触摸和桌面
捏放大：触摸和桌面（带有支持的触控板）
鼠标滚轮缩放：桌面
两指触控板向上或向下缩放：桌面
点按以选择：触摸和桌面
点击背景以取消选择：桌面
点按背景以取消选择：桌面和触摸
通过修饰键（Shift，Command，Control，Alt）+ Tap进行多重选择：桌面
框选择：触摸（三指滑动）和桌面（修改键+鼠标向下然后拖动）
抓取并拖动节点：触摸和桌面
用户可以控制所有手势动作，并在需要时将其打开或关闭。

3.核心变量名称

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

4.使用

// 导入
// npm环境中使用Cytoscape.js
import cytoscape from 'cytoscape';

5.初始化

Cytoscape.js的一个实例对应一个图：

var cy = cytoscape({
  container: document.getElementById('cy') 
});
// 也可以使用 支持jQuery写法
var cy = cytoscape({
  container: $('#cy')
});

6.样式

Cytoscape.js中的样式尽可能遵循CSS约定。在大多数情况下，属性与其对应的CSS同名具有相同的名称和行为。但是，CSS中的属性不足以指定图形某些部分的样式。在这种情况下，将引入Cytoscape.js特有的其他属性。

selector是选择器

cy.style()
  .clear() // start a fresh stylesheet without even the default stylesheet

  .selector('node')
    .style('background-color', 'magenta')

  .selector('edge')
      .style({
      'width': 3,
      'line-color': 'yellow'
    })

7.事件

select

cy.on（events [ ， 选择器] ， function（event））

选择器 [可选] 一个选择器，用于指定要为其运行处理程序的元素。

功能（事件） 当指定事件之一发生时调用的处理函数。

事件 事件对象。

基本事件类型

mousedown ：按下鼠标按钮时
mouseup ：释放鼠标按钮时
click：以后mousedown再mouseup
mouseover ：将光标放在目标上方时
mouseout ：当光标从目标移出时
mousemove ：当光标移动到目标上方的某个位置时
touchstart ：当一根或多根手指开始触摸屏幕时

touchmove ：当一个或多个手指在屏幕上移动时
touchend ：从屏幕上移开一根或多根手指时
还有高级事件
tapstart或vmousedown：标准化的点击启动事件（mousedown或touchstart）
tapdrag或vmousemove：规范化的移动事件（touchmove或mousemove）
tapdragover：归一化过元件事件（或者touchmove或mousemove/ mouseover）
tapdragout：元素事件的归一关闭（在touchmove或mousemove/ mouseout）
tapend或vmouseup：标准化的点击结束事件（mouseup或touchend）
tap或vclick：规范化的点击事件（或click，touchstart之后touchend不带touchmove）
taphold ：标准化的点击保持事件
cxttapstart ：标准化的右键单击mousedown或两指 tapstart
cxttapend：标准化的右键单击mouseup或两指tapend
cxttap ：标准化的右键单击或两指 tap
cxtdrag：在之后cxttapstart但之前归一化的mousemove或两指拖动cxttapend
cxtdragover ：通过遍历节点时 cxtdrag
cxtdragout ：通过离开节点时 cxtdrag
boxstart ：开始选择框时
boxend ：结束框选择时
boxselect ：由框选择选择时在元素上触发
box ：在框内打开时在元素上触发 boxend