cytoscape 笔记

cytoscape.js是一个做网页可视化的常用工具 。cytoscape.js包含图论模型和可选的渲染器，用于显示交互式图形。该库旨在使程序员和科学家尽可能轻松地在他们的应用程序中使用图形理论

安装引入

npm install cytoscape --save //安装

// 在需要用到得模块中
import cytoscape from 'cytoscape'

基本用法

• 容器 container
• 元素 elements
• 样式 style
• 布局 layout

<div id="cy"></div>

//首先需要初始化，用一个dom元素容器来进行布局和渲染。
const cy = cytoscape({
          container: document.getElementById('cy'),
        });

// 配置信息
const cy = cytoscape({
          container: document.getElementById('cy'),
          userZoomingEnabled: false, //是否允许用户事件（例如鼠标滚轮，捏合缩放）缩放图形
          wheelSensitivity: 0.1, //缩放时更改滚轮灵敏度。
          autoungrabify: true,//节点是否可以拖拽
          minZoom: 0.3,//图表缩放得最小界限
        });


//布局/////////////////////////        
preset 该preset布局使节点在您手动指定的位置。
// grid grid布局使节点在良好隔开的网格。
// circle 该circle布局使节点在一个圆圈。
// concentric 该concentric布局定位在同心圆节点，根据您所指定的节点分隔成水平的度量。此布局设置concentric值ele.scratch()。
// breadthfirst breadthfirst布局使在层次结构中的节点，基于所述图的breadthfirst遍历。默认的自上而下模式
// random, //该random布局使节点在视口内随机位置。
layout: {
    name: 'random', //该random布局使节点在视口内随机位置。
    
    fit: true， //如果要适应视区
    padding: 30， //安装padding
    boundingbox: 未定义， //约束布局边界；x1，y1，x2，y2或x1，y1，w，h
    animate: false， //如果要转换节点位置
    动画持续时间： 500， //如果启用动画持续时间（毫秒）
    AnimationEleasing: 未定义， //如果启用，则释放动画
    animatefilter： 函数（ node， i） 返回true；， //一个确定是否应为节点设置动画的函数。默认情况下，所有节点都启用了动画。非动画节点在布局开始时立即定位。
    ready: 未定义， //layoutready上的回调
    stop: 未定义， //在layoutstop上回调
    transform： 函数（ node， position） 返回位置； //转换给定的节点位置。用于在离散布局中更改方向
  },

// 接着设置样式，可以给每个节点 连线等设置。
style: [{
  //设置节点样式
        selector: 'node',
        style: {
          'content': 'data(id)',
          "shape": "data(type)", //节点体
          'text-opacity': 0.5,
          "height": 40,
          "width": 40,
          'pie-size': '100%',
          'text-valign': 'center',
          'text-halign': 'left',

          // 'pie-1-background-color': '#E8747C',
          // 'pie-1-background-size': 'mapData(occupy, 0, 10, 0, 100)',
        }
      },
    //设置连线样式
      {
        selector: 'edge',
        style: {
          width: 3,
          'target-arrow-shape': 'triangle',
          // "target-arrow-fill": "hollow", //箭头填充 空心
          'line-color': '#9dbaea',
          'target-arrow-color': '#9dbaea',
          'curve-style': 'bezier',
        }
      },

    ],

//最后设置数据
elements: {
    //节点数据
    nodes: this.nodes,
    //关系
    edges: this.edges,
  }
//节点数据
nodes: [{
      data: {
        id: 'n0',
        xx:' '
      },
    },
    {
      data: {
        id: 'n1',
        xx:' '
      }
    },
  ],
  //连线数据
  edges: [{
      data: {
        source: 'n2',
        target: 'n1'
      }
    },

    {
      data: {
        source: 'n8',
        target: 'n1',
        label: '111111'
      }
    },
  ]

常用的方法

1.cy.add(eles); 点击播放按钮可以查看示例运行效果
cy.add({
    group: 'nodes',
    data: { weight: 75 },
    position: { x: 200, y: 200 }
});

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' } }
]);
2.cy.remove(eles); 移除节点 
var j = cy.$('#j');
cy.remove( j );
//使用选择器来进行元素删除
var collection = cy.elements('node[weight > 50]');
cy.remove( collection );
3.cy.on( events [, selector], function(event) ); 事件绑定

常用事件

mousedown : when the mouse button is pressed

mouseup : when the mouse button is released

click : after mousedown then mouseup

mouseover : when the cursor is put on top of the target

mouseout : when the cursor is moved off of the target

mousemove : when the cursor is moved somewhere on top of the target

touchstart : when one or more fingers starts to touch the screen

touchmove : when one or more fingers are moved on the screen

touchend : when one or more fingers are removed from the screen

4.获取element的几种方法：cy.getElementById( id )  cy.$()  等

5.eles.select(); 设置element的选中状态

6.cy.data('id')   获取数据对象

7.eles.addClass('add')  添加类

8.eles.outgoers() element的outgoers 输出子代nodes和edges

9.eles.successors()  element的the outgoers, the outgoers' outgoers, ...，可理解为所有子孙后代nodes和edges

10.eles.incomers()  element的上一级nodes和edges

插件推荐：tooltip (tippy.js)、cytoscape-cose-bilkent、cytoscape-fcose


//https://blog.csdn.net/ilovethesunshine/article/details/109581942

Node body(节点体)

//形状
width : 节点主体的宽度。此属性可以采用特殊值label，因此宽度自动基于节点的标签。
height : 节点主体的高度。此属性可以采用特殊值label，因此高度自动基于节点的标签。
shape : 节点主体的形状。请注意，每个形状都适合指定的width和height，因此如果您需要等边形状（即width !== height几个等边的形状），您可能需要调整width和height。化合物仅支持*矩形形状，因为化合物的尺寸由子项的边界框定义。接受以下值：ellipse(椭圆)、triangle(三角形)、rectangle(矩形)、roundrectangle(圆角矩形)、bottomroundrectangle(底角矩形)、cutrectangle(矩形截面)、barrel(桶)、rhomboid(菱形)、diamond(钻石)、pentagon(五角形)、hexagon(六角形)、concavehexagon(凹面六边形)、heptagon(七边形)、octagon(八角形)、star(星形)、tag(标签)、vee(V字形)、polygon(多边形，需配合shape-polygon-points属性)
shape-polygon-points : 在[-1, 1 ]范围内的空间分隔的列表，表示交替的x和y值（即x1 y1 x2 y2，x3 y3…）。这表示节点形状的多边形中的点。

//背景
backgroud-color : 节点主体的颜色。
background-blacken :使节点的主体变为0到1的值; 将节点的主体白化为0到-1的值。
background-opacity : 节点背景颜色的不透明度级别。


//周围的填充量
padding : 节点所有边周围的填充量。可以指定百分比或像素值。例如，50％和50px都是可接受的值。默认情况下，百分比填充计算为节点宽度的百分比。
padding-relative-to : 确定当且仅当使用百分比单位时如何计算填充。 接受下面指定的关键字之一：
width : 将填充计算为节点宽度的百分比。
height : 计算填充占节点高度的百分比。
average : 计算填充占节点宽度和高度平均值的百分比。
min : 将填充计算为节点宽度和高度的最小值的百分比。
max : 将填充计算为节点宽度和高度的最大值的百分比。

Edge line(边缘线)

width : 边缘线的宽度，可接受百分比和像素。
curve-style : 用于分离两个节点之间的两个或多个边缘的弯曲方法；可能是：
  haystack（默认的，非常快的，捆绑直边，其中不支持环和化合物）
  bezier (捆绑弯曲边)，单独使用该属性和haystack属性没有太大差别，如果配合Edge arrow标题里的属性可以显示不同款式的边缘线。
    'curve-style': 'bezier',
    'target-arrow-shape': 'triangle',
    'target-arrow-color': 'red'
  unbundled-bezier（用于手动控制点的弯曲边）
  segments（一系列直线）。
line-color : 边缘线条的颜色。
line-style : 边缘线条的样式；可以是solid, dotted, or dashed
target-arrow-color :边缘的源箭头的颜色。
target-arrow-shape : 边缘的源箭头的形状。
  triangle：三角形这里写图片描述
  triangle-tee：三角三通这里写图片描述
  triangle-cross：三角交叉这里写图片描述
  triangle-backcurve：三角形反曲线这里写图片描述
  vee：V字形这里写图片描述
  tee：T字形这里写图片描述
  square：正方形这里写图片描述
  circle：圆形这里写图片描述
  diamond：钻石形这里写图片描述
  none：无图形这里写图片描述
target-arrow-fill : 边缘源箭头的填充状态可以是填充的或空心的。
arrow-scale : 缩放箭头大小；可以是任意数＞0。 
/* 
对于上面的每个边箭头属性，用一个来替换<pos> target
source : 在边缘的尽头指出源节点。
mid-source : 在边缘的中间指出源节点。
target : 在边缘的尽头指出目标节点。
mid-target: 在边缘的中间指出目标节点。
*/

Labels(标签)

Label text(标签文字)：

label : 要为元素的标签显示的文本。
source-label : 为边缘的源标签显示的文本。
target-label : 为边缘的目标标签显示的文本。
Basic font styling(基本的字体样式)：

color : 元素标签的颜色。
text-opacity : 标签的透明度，包括外边框。
font-family : 在标签文本上使用的一个逗号分隔的字体名称列表。
font-size : 标签文本的大小。
font-style : 要应用于标签文本的CSS字体样式。
font-weight : 要应用于标签文本的CSS字体粗细权重。
text-transform : 应用于标签文本的转换；可以是 none(无), uppercase(大写), or lowercase(小写)。
Wrapping text(包装文字):

text-wrap :应用于标签文本的包装样式；可以是 none 对于没有使用包装的样式 (包括手动换行符: \n), 用于手动和/或自动包装的包装或省略来截断字符串并基于文本最大宽度(text-max-width)附加“…”。
text-max-width : 包装文本的最大宽度，当text-wrap被设置为wrap或ellipsis时应用。For only manual newlines (i.e. \n), set a very large value like 1000px such that only your newline characters would apply.
Node label alignment(节点标签对齐):

text-halign : 节点标签的水平对齐；可能有left(左)、center(中)或right(右)的值。
text-valign :节点标签的垂直对齐；可以有值top(顶部)、center(中心)或bottom(底部)。
Edge label alignment(边缘标签对齐):

source-text-offset : 用于边缘的源标签，远离源节点标签的距离。
target-text-offset : 用于边缘的目标标签，远离目标节点标签的距离。
Margins(边距):

text-margin-x : 沿X轴移动标签的边距。
text-margin-y : 沿Y轴移动标签的边距。
source-text-margin-x : 对于边缘的源标签。沿X轴移动标签的边距。
source-text-margin-y : 对于边缘的源标签。沿Y轴移动标签的边距。
target-text-margin-x : 对于边缘的目标标签。沿X轴移动标签的边距。
target-text-margin-y :对于边缘的目标标签。沿Y轴移动标签的边距。
Rotating text(旋转文字):

text-rotation : 应用于标签的旋转角度。
对于边缘，可以使用特殊值autorotate将标签与边缘对齐。
对于节点，标签沿节点上的锚点旋转，因此标签边距可能对某些用例有用。
特殊值none可用于表示0deg。
旋转最适合从左到右的文本。
source-text-rotation : 应用于源标签的旋转角度。
target-text-rotation : 应用于目标标签的旋转角度。
Outline(轮廓):

text-outline-color : 元素标签文本周围轮廓的颜色。

text-outline-opacity : 标签文本上轮廓的不透明度。

text-outline-width : 标签文本上的轮廓大小。

Transition animation(过渡动画)

transition-property : 以逗号分隔的样式属性列表，用于在此状态下设置动画。
transition-duration : 以秒为单位的过渡时间（例如0.5秒）。
transition-delay : 转换发生之前的延迟时间（例如250ms）。
transition-timing-function :一个缓动函数，用于控制动画进度曲线;可能是以下值之一。

Core(核心)

active-bg-color : 当用户抓住背景时显示的指示符的颜色。
active-bg-opacity : 活动背景指示符的不透明度。
active-bg-size : 活动背景指示符的大小。

selection-box-color : 用于拖动选择的选择框的背景颜色。
selection-box-border-color : 选择框上边框的颜色。
selection-box-border-width : 选择框上边框的大小。
selection-box-opacity : 选择框的不透明度。

Layouts

var options = {
  name: 'grid',//布局名称
  padding: 30, // 画布内边距
  boundingBox: undefined, // 布局约束界限;如： { x1, y1, x2, y2 } or { x1, y1, w, h }
  rows: undefined, // 网格中的行数
  cols: undefined, // 网格中的列数
  sort: undefined, // 排序函数来排序节点；例如：function(a, b){ return a.data('weight') - b.data('weight') }
};

var options = {
  name: 'breadthfirst',//布局名称
  fit: true, // 是否使视口适合图形,设置为false时图形会超出视口，所以一般默认就好
  directed: false, //树是否向下（或者如果为假，边缘可以指向任何方向）
  padding: 30, // 填充适合
  circle: false, // 如果为真，则将深度放在同心圆中，从中间向外发散节点，如果为假，则将深度置于顶部
  spacingFactor: 1.75, // 正间隔系数，更大=>节点之间的空间更大（如果导致重叠，则为N.B.n / a）
  boundingBox: undefined, // 约束布局边界; {x1，y1，x2，y2}和{x1，y1，w，h}
  avoidOverlap: true, // 防止节点重叠，如果没有足够的空间可能会溢出boundingBox
  nodeDimensionsIncludeLabels: false, // 在计算布局算法的节点边界框时排除标签
  roots: undefined, //树的根
  maximalAdjustments: 0, // 尝试以最大方式定位节点的次数（即没有回溯）
  animate: false, //是否转换节点位置
  animationDuration: 500, // 动画持续时间（如果启用）
  animationEasing: undefined, // 如果启用，则放宽动画
  animateFilter: function ( node, i ){ return true; }, // 确定节点是否应设置动画的函数。默认情况下在动画上启用动画的所有节点。布局开始时，非动画节点立即定位。
  ready: undefined, //在layoutready上回调
  stop: undefined, //在 layoutstop上的回调
  transform: function (node, position ){ return position; } // 变换给定的节点位置。用于改变离散布局中的流向
};

var options = {
  //布局名称
  name: 'cose',	
  // 画布内边距
  padding: 30,
  // 节点间间距
  componentSpacing: 40,
};

cy.layout( options );

Algorithms(算法)

//此函数仅对调用集合中的图形子集执行广度优先搜索。
var bfs = cy.elements().bfs('#a', function(){}, true);

var i = 0;
var highlightNextEle = function(){
  if( i < bfs.path.length ){
    bfs.path[i].addClass('highlighted');

    i++;
    setTimeout(highlightNextEle, 1000);
  }
};

// kick off first highlight
highlightNextEle();