可视化的交互图形库cytoscape.js(网络图谱)

业务需要实现类似天眼查图谱的功能，接触到了cytoscape(包括cytoscape.js和可视化的CytoScape【图形化操作】)，需要实现类似下图功能，

 

1、访问流出

    div画布 --> request --> controller --> ... --> db --> json --> response --> cytoscape.js --> 网络图

2、整理整理

    a、常用功能

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

container：应该呈现图形的HTML DOM元素。如果Cytoscape.js无法正常运行，这是未指定的。该容器预计将是一个空的分区; 可视化拥有div。

elements：指定为普通对象的元素数组。为了方便起见，可以将此选项指定为解析为元素JSON的承诺。

style：用于设置图形样式的样式表。为了方便起见，可以将此选项指定为解析为样式表的承诺。

layout：一个指定布局选项的普通对象。最初运行的布局由该name字段指定。有关它支持的选项，请参阅布局的文档。如果你想在你的元素JSON中指定自己的节点位置，你可以使用preset布局 - 默认情况下它不会设置任何位置，将节点留在当前位置（例如options.elements在初始化时指定）

b、初始化

var cy = cytoscape({
  container: document.getElementById('cy') // container to render in
//div画布
});

    c、指定基本选项

对于可视化的container，elements，style，和layout选项通常应设置：
container: document.getElementById('cy'),
			  elements: [
            { data: { id: 'a' } },
            { data: { id: 'b' } },
            {
              data: {
                id: 'ab',
                source: 'a',
                target: 'b'
              }
            }],
          style: [
            {
              selector: 'node',
              style: {
                shape: 'square',
                'background-color': 'green',
                label: 'data(id)'
              }
            }]
        });
 cy.layout({
            name: 'circle'
        }).run();

    d、布局

cy.layout()
		必须指定options.name您希望使用的布局的名称。
		必须调用layout.run()它才能影响图形。

    e、动画

cy.animated()		获取窗口是否使用动画
	cy.animate()		为窗口创建动画
		options: 包含动画细节的对象。
			zoom:  缩放级别（编号）或图形动画所需的缩放配置对象。
			level: 要使用的缩放级别。
			position: 变焦发生的位置。这会自动修改平移，以便在缩放期间指定的模型位置在视口范围中保持相同的位置。
			renderedPosition 作为使用模型位置的替代方式，呈现关于哪个缩放发生的渲染位置。这会自动修改平移，以便在缩放过程中，与动画开始时渲染位置相对应的模型位置保留在视口范围中的相同位置。
		pan:   平移位置，图形将被动画化。
		panBy: 将图形动画化的相对平移位置。
		fit:   包含拟合选项的对象，将从中动画显示图形。
			eles:  将要安装视口的元素或选择器。
			padding: 填充与配件一起使用。
		center: 包含居中选项的对象，图形将从中进行动画显示。
			else: 要将视口居中的元素或选择器。
		duration: 动画的持续时间，以毫秒为单位。
		queue:  指示是否对动画进行排队的布尔值。
		complete: 动画完成时调用的函数。
		step:  每次调用动画步骤的函数。
		easing: 一个transition-timing-function宽松风格的字符串，塑造动画发展曲线。

    f、其他

导出
	cy.png(), cy.jpg()...cy.json()
	选项 导出选项。
		output:  输出是否应该是'base64uri'（默认）'base64'，或'blob'。
		BG:		 图像的背景颜色（默认为透明）。
		full:	 是否导出当前视口视图（false默认）或整个图形（true）。
		scale:	 此值指定缩放合成图像大小的正数。
		maxWidth: 结合自动指定比例maxHeight，使得生成的图像不超过maxWidth。
		maxHeight: 自动指定缩放比例以maxWidth使得生成的图像不高于maxHeight。
	JPEG格式是有损的，而PNG不是。这意味着这cy.jpg()对于文件大小比像素完美图像更重要的情况非常有用。JPEG压缩会使你的图像（特别是边缘线）模糊和扭曲。

eles.once（）     
绑定每个集合每个事件发出一次的回调函数。

eles.once（event[ ， selector] ， function（event））
	events: 以空格分隔的事件名称列表。
	selector: [可选] 委托选择器指定运行处理程序的子元素。
	function（event） 当发生某个指定事件时调用的处理程序函数。
		event 事件对象。	
		
eles.data（）		别名： eles.attr()
读取和编写与元素关联的开发人员定义的数据。

ele.data（）
	获取元素的所有数据。
ele.data（name）
	获取元素的特定数据字段。
		name 要获取的字段的名称。
ele.data（name， value）
	为元素设置一个特定的数据字段。
		name 要设置的字段的名称。
		value 为该字段设置的值。
ele.data（obj）
	通过一个对象一次更新多个数据字段。
		OBJ 包含用于更新数据字段的name - value对的对象。
只能放入JSON可串行数据ele.data()。对于临时数据或不可序列化的数据，请使用ele.scratch()。

eles.removeData（）		别名： eles.removeAttr()
删除与元素关联的开发人员定义的数据。

后续更新，使用完善！