记录学习Cytoscape.js的过程
官方教程 https://js.cytoscape.org/
另有一篇别人的博文分享：cytoscape.js基础篇https://blog.****.net/dahaiaixiaohai/article/details/89669526

一、About 关于

Cytoscape.js is an open-source graph theory (a.k.a. network) library written in JS. You can use Cytoscape.js for graph analysis and visualisation.

Cytoscape.js allows you to easily display and manipulate rich, interactive graphs. Because Cytoscape.js allows the user to interact with the graph and the library allows the client to hook into user events, Cytoscape.js is easily integrated into your app, especially since Cytoscape.js supports both desktop browsers, like Chrome, and mobile browsers, like on the iPad. Cytoscape.js includes all the gestures you would expect out-of-the-box, including pinch-to-zoom, box selection, panning, et cetera.

Cytoscape.js also has graph analysis in mind: The library contains many useful functions in graph theory. You can use Cytoscape.js headlessly on Node.js to do graph analysis in the terminal or on a web server.

Cytoscape.js is an open-source project, and anyone is free to contribute. For more information, refer to the GitHub README.

The library was created at the Donnelly Centre at the University of Toronto. It is the successor of Cytoscape Web.

Cytoscape.js 是一个开源的图论(又名网络)库，用JS编写。可以使用cytoscap .js进行图形分析和可视化。
Cytoscape.js 允许您轻松地显示和操作丰富的交互式图形。因为Cytoscape.js允许用户与图形交互，而库允许客户端挂钩到用户事件，所以Cytoscape.js很容易集成到你的应用程序中，特别是因为Cytoscape.js既支持桌面浏览器，如Chrome，又支持移动浏览器，如iPad。Cytoscape.js 包含了所有你期待的开箱即用的手势，包括捏拉缩放、方框选择、平移等等。
Cytoscape.js 还考虑了图分析:这个库包含了图论中很多有用的函数。你可以在Node.js上直接使用Cytoscape.js 在终端或web服务器上做图形分析。
js是一个开源项目，任何人都可以免费贡献。更多信息，请参考GitHub自述文件。
该库创建于多伦多大学的唐纳利中心。它是Cytoscape Web的继承者。

二、Packages 包引用

npm : npm install cytoscape
bower : bower install cytoscape
jspm : jspm install npm:cytoscape

三、Notation 记法

（一）Graph model 图模型

Cytoscape.js supports many different graph theory usecases. It supports directed graphs, undirected graphs, mixed graphs, loops, multigraphs, compound graphs (a type of hypergraph), and so on.

Cytoscape.js 支持许多不同的图论应用。它支持有向图、无向图、混合图、循环、多图、复合图(超图的一种类型)等等。

（二）Architecture & API 架构与应用程序接口

There are two components in the architecture that a programmer must be concerned with in order to use Cytoscape.js, the core (i.e. a graph instance) and the collection. In Cytoscape.js, the core is a programmer’s main entry point into the library. From the core, a programmer can run layouts, alter the viewport, and perform other operations on the graph as a whole.

The core provides several functions to access elements in the graph. Each of these functions returns a collection, a set of elements in the graph. Functions are available on collections that allow the programmer to filter the collection, perform operations on the collection, traverse the graph about the collection, get data about elements in the collection, and so on.
Note that a collection is immutable by default, meaning that the set of elements within a collection can not be changed. The API returns a new collection with different elements when necessary, instead of mutating the existing collection. This allows the programmer to safely use set theory operations on collections, use collections functionally, and so on. Note that because a collection is just a list of elements, it is relatively inexpensive to create new collections.
For very performance intensive code, a collection can be treated as mutable with eles.merge() and eles.unmerge(). Most apps should never need these functions.

为了使用Cytoscape.js，程序员必须考虑架构中的两个组件，即核心core（即图实例）和集合collection。在Cytoscape.js中，核心core是程序员进入库的主要入口点。程序员可以从整体上运行布局，更改视口并在整个图上执行其他操作。
核心core提供了几个函数来访问图中的元素。每个函数都返回一个集合collection，即图中的一组元素。函数可以在集合上使用，允许程序员过滤集合、对集合执行操作、遍历关于集合的图、获取集合中元素的数据等等。
注意，默认情况下集合是不可变的，这意味着集合中的元素集不能更改。必要时，API 返回一个新的集合，其中包含不同的元素，而不是对现有的集合进行变异。这允许程序员安全地使用集合上的集合理论操作，功能上使用集合，等等。注意，因为集合只是元素列表，所以创建新集合相对来说比较容易。
对于非常高性能的代码，可以将集合视为具有 eles.merge ()和 eles.unmerge ()的可变集合。大多数应用程序都不应该需要这些功能。

（三）Functions 函数

There are several types that different functions can be executed on, and the variable names used to denote these types in the documentation are outlined below:

有几种类型可以执行不同的函数，文档中用于表示这些类型的变量名概述如下:

By default, a function returns a reference back to the calling object to allow for chaining (e.g. obj.fn1().fn2().fn3()). Unless otherwise indicated in this documentation, a function is chainable in this manner unless a different return value is specified. This applies both to the core and to collections.
For functions that return a value, note that calling a singular — ele, node, or edge — function on a collection of more than one element will return the expected value for only the first element.

默认情况下，函数返回对调用对象的引用，以允许链式调用(例如 obj.fn1().fn2().fn3()).除非本文档中另有说明，否则函数可以采用链式方式，除非指定了不同的返回值。这既适用于核心core也适用于集合collections。
对于有返回值的函数，请注意，在包含多个元素的集合上调用一个奇异的——ele单元素集合/node单节点集合/edge单边集合——函数将只返回第一个元素的期望值。

（四）Object ownership 对象所有权

When passing objects to Cytoscape.js for creating elements, animations, layouts, etc., the objects are considered owned by Cytoscape. Objects like elements have several levels to them, and doing deep copies of those objects every time they are passed to Cytoscape creates additional expense. When desired, the programmer can copy objects manually before passing them to Cytoscape. However, copying is not necessary for most programmers most of the time.

当将对象传递给 Cytoscape.js 用于创建元素、动画、布局等时，这些对象被认为属于 Cytoscape。像元素这样的对象有多个级别，每次将这些对象传递到 Cytoscape 时都要对它们进行深度拷贝，这会增加额外的开销。如果需要，程序员可以在将对象传递到Cytoscape之前手动复制对象。然而，对于大多数程序员来说，大部分时间并不需要复制。

（五）Gestures 手势

Cytoscape.js 支持多种手势:

Grab and drag background to pan : touch & desktop
Pinch to zoom : touch & desktop (with supported trackpad)
Mouse wheel to zoom : desktop
Two finger trackpad up or down to zoom : desktop
Tap to select : touch & desktop
Tap background to unselect : desktop
Taphold background to unselect : desktop & touch
Multiple selection via modifier key (shift, command, control, alt) + tap : desktop
Box selection : touch (three finger swipe) & desktop (modifier key + mousedown then drag)
Grab and drag nodes : touch & desktop

抓取并拖动背景进行平移：触摸和桌面
缩放：触摸和桌面（带有支持的触控板）
鼠标滚轮缩放：桌面
两指触控板向上或向下缩放：桌面
点击以选择：触摸和桌面
点击背景以取消选择：桌面
长按背景以取消选择：桌面和触摸
通过修改键（Shift，Command，Control，Alt）+ Tap进行多重选择：桌面
方框选择：触摸（三指滑动）和桌面（修改键+鼠标向下然后拖动）
抓取并拖动节点：触摸和桌面

所有的手势动作都可以由程序员控制，需要的时候就可以开启或关闭。

（六）Position 位置

A node’s position refers to the centre point of its body.
There is an important distinction to make for position: A position may be a model position or a rendered position.
A model position — as its name suggests — is the position stored in the model for an element. An element’s model position remains constant, despite changes to zoom and pan. Numeric style property values are specified in model co-ordinates, e.g. a node with width 20px will be 20 pixels wide at zoom 1.
A rendered position is an on-screen location relative to the viewport. For example, a rendered position of { x: 100, y: 100 } specifies a point 100 pixels to the right and 100 pixels down from the top-left corner of the viewport. The model position and rendered position are the same at zoom 1 and pan (0, 0).
An element’s rendered position naturally changes as zoom and pan changes, because the element’s on-screen position in the viewport changes as zooming and panning are applied. Panning is always measured in rendered coordinates.
In this documentation, “position” refers to model position unless otherwise stated.
A node’s position can be set manually, or it can be set automatically using a layout. Because the positions of two nodes influence the lengths of the edges in between them, a layout effectively sets edge lengths.

节点的位置是指其主体的中心点。

位置有一个重要区分：位置可以是模型位置或渲染位置。
模型位置(model position)是元素存储在模型中的位置。元素的模型位置保持不变，尽管变化了缩放和平移。
数字样式属性值在模型坐标中指定，例如，宽度为20px 的节点在缩放1时宽度为20像素。

渲染位置(rendered position)是相对于视口viewport的屏幕位置。
例如，渲染位置{ x: 100，y: 100}指定从视口的左上角向右100像素和向下100像素。模型位置和渲染位置在缩放1和平移(0,0)处相同。
缩放1和平移（0，0）时，模型位置和渲染位置相同。
元素的渲染位置自然会随着缩放和平移而改变，这是因为应用缩放和平移时，元素在视口中的屏幕位置也会发生变化。平移始终以渲染的坐标进行测量。

在本文档中，“位置”是指模型位置，除非另有说明。
节点的位置可以手动设置，也可以使用布局layout自动设置。由于两个节点的位置会影响两个节点之间的边缘长度，因此布局有效地设置了边长。