Cytoscape.js
let cy = cytoscape({
// 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: false, // 是否启用了框选择(即拖动框叠加,并将其释放为选择).如果启用,则用户必须点击以平移图表.
selectionType: 'additive', // 一个字符串，指示用户输入的选择行为.对于'additive',用户进行的新选择将添加到当前所选元素的集合中.对于'single',用户做出的新选择成为当前所选元素的整个集合.
touchTapThreshold: 8, // 非负整数,分别表示用户在轻击手势期间可以在触摸设备和桌面设备上移动的最大允许距离.这使得用户更容易点击.
// 这些值具有合理的默认值,因此建议不要更改这些选项,除非您有充分的理由这样做.大值几乎肯定会产生不良后果。
desktopTapThreshold: 4, // 非负整数,分别表示用户在轻击手势期间可以在触摸设备和桌面设备上移动的最大允许距离.这使得用户更容易点击.
// 这些值具有合理的默认值,因此建议不要更改这些选项,除非您有充分的理由这样做.大值几乎肯定会产生不良后果。
autolock: false, // 默认情况下是否应锁定节点(根本不可拖动,如果true覆盖单个节点状态).
autoungrabify: false, // 默认情况下节点是否不允许被拾取(用户不可抓取,如果true覆盖单个节点状态).
autounselectify: false, // 默认情况下节点是否允许被选择(不可变选择状态,如果true覆盖单个元素状态).
// rendering options:
headless: false, // true:空运行,不显示不需要容器容纳.false:显示需要容器容纳.
styleEnabled: true, // 一个布尔值,指示是否应用样式.
hideEdgesOnViewport: true, // 渲染提示,设置为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'(默认).
// DOM容器,决定内容展示的位置,方式一(原生):document.getElementById('xx'),方式二(jQuery):$('#xx')
container: document.getElementById('map_1556155828169'),
// 节点内容,所有的顶点及关系信息的载体
// 方式一:flat array of nodes and edges,顶点和节点平坦排列
elements: [
{data: {id: 'n2'}, position: {x: 400, y: 200},}, // node n2
{data: {id: 'n3'}, position: {x: 123, y: 234}}, // node n3
{data: {id: 'nparent'}}, // node nparent, 复合节点
{ // edge e1
group: 'edges', /* 'nodes' for a node, 'edges' for an edge,指定了'source'和'target'属性,可省略此属性. */
data: {
id: 'e1',
/* 因为指定了'source'和'target',所以推断为边缘. `eles.move()`可以有效地更改'source'和'target'的内容. */
source: 'n1', /* 起点 */ target: 'n2' /* 终点 */
}
}
],
// or
// 方式二: nodes保存所有节点, edges保存所有关系.
elements: {
nodes: [{data: {id: 'n2'}, position: {x: 400, y: 200},},{data: {id: 'n3'}, position: {x: 123, y: 234}},{data: {id: 'nparent'}},],
edges: [
{ // edge e1
group: 'edges', /* 'nodes' for a node, 'edges' for an edge,指定了'source'和'target'属性,可省略此属性. */
data: {
id: 'e1',
/* 因为指定了'source'和'target',所以推断为边缘. `eles.move()`可以有效地更改'source'和'target'的内容. */
source: 'n1', /* 起点 */ target: 'n2' /* 终点 */
}
}
]
},
// 用于设置图形样式的样式表.为方便起见,也可以将此选项指定为解析为样式表的promise.
style: [
{selector: 'node', style: {'label': 'data(id)'}}
],
// 一个指定布局选项的普通对象.
layout: {name: 'preset'},
});
let ele =
{ // 一个节点
group: 'nodes', // 'nodes' for a node, 'edges' for an edge
data: { // 元素数据
id: 'n1', // 每个元素的唯一标识字段id(字符串或数字),在未定义的情况下自动分配.
parent: 'nparent', // 表示复合节点的父级id,未定义代表无父结点.'eles.move()'可以有效地更改'parent'.
xxx: 'xxx', // 其他用户数据
},
scratch: { // 暂存数据(通常是临时数据或非序列化数据).
_foo: 'bar' // 其他用户数据
},
position: {x: 100, y: 100}, // 节点位置
renderedPosition: {x: 200, y: 200}, // 节点呈现位置,优先级高于position
selected: false, // 节点被选择
selectable: true, // 节点可以被选择
locked: false, // 节点是否被锁定,锁定后,位置不可变
grabbable: true, // 用户是否可以抓取和移动节点
classes: ['foo', 'bar'] // 类样式,可以是['foo', 'bar'],也可以是'foo bar'
};
let edge = { // edge e1
group: 'edges', /* 'nodes' for a node, 'edges' for an edge,指定了'source'和'target'属性,可省略此属性. */
data: {
id: 'e1',
/* 因为指定了'source'和'target',所以推断为边缘. `eles.move()`可以有效地更改'source'和'target'的内容. */
source: 'n1', /* 起点 */ target: 'n2', /* 终点 */
xxx: 'xxx', // 其他用户数据
},
scratch: { // 暂存数据(通常是临时数据或非序列化数据).
_foo: 'bar' // 其他用户数据
},
selected: false, // 关系被选择
selectable: true, // 关系可以被选择
classes: ['foo', 'bar'] // 类样式,可以是['foo', 'bar'],也可以是'foo bar'
}
cy.getElementById('n0n1').style({'source-arrow-shape': 'triangle-backcurve', 'target-arrow-shape': 'triangle-backcurve'});
cy.getElementById('n1n2').style({'target-arrow-shape': 'triangle-backcurve'});
cy.getElementById('n2n3').style({'source-arrow-shape': 'triangle-backcurve'});
http://jsbin.com/aqupun/7/edit
http://jsbin.com/aqupun/7/edit?html,css,js,output
$(function(){ // on dom ready
$('#cy').cytoscape({
layout: {
name: 'circle'
},
style: cytoscape.stylesheet()
.selector('node')
.css({
'shape': 'data(faveShape)',
'width': 'mapData(weight, 40, 80, 20, 60)',
'content': 'data(name)',
'text-valign': 'center',
'text-outline-width': 2,
'text-outline-color': 'data(faveColor)',
'background-color': 'data(faveColor)',
'color': '#fff'
})
.selector(':selected')
.css({
'border-width': 3,
'border-color': '#333'
})
.selector('edge')
.css({
'width': 'mapData(strength, 70, 100, 2, 6)',
'target-arrow-shape': 'triangle',
'source-arrow-shape': 'circle',
'line-color': 'data(faveColor)',
'source-arrow-color': 'data(faveColor)',
'target-arrow-color': 'data(faveColor)'
})
.selector('edge.questionable')
.css({
'line-style': 'dotted',
'target-arrow-shape': 'diamond'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: [
{ data: { id: 'j', name: 'Jerry', weight: 65, faveColor: '#6FB1FC', faveShape: 'triangle' } },
{ data: { id: 'e', name: 'Elaine', weight: 45, faveColor: '#EDA1ED', faveShape: 'ellipse' } },
{ data: { id: 'k', name: 'Kramer', weight: 75, faveColor: '#86B342', faveShape: 'octagon' } },
{ data: { id: 'g', name: 'George', weight: 70, faveColor: '#F5A45D', faveShape: 'rectangle' } }
],
edges: [
{ data: { source: 'j', target: 'e', faveColor: '#6FB1FC', strength: 90 } },
{ data: { source: 'j', target: 'k', faveColor: '#6FB1FC', strength: 70 } },
{ data: { source: 'j', target: 'g', faveColor: '#6FB1FC', strength: 80 } },
{ data: { source: 'e', target: 'j', faveColor: '#EDA1ED', strength: 95 } },
{ data: { source: 'e', target: 'k', faveColor: '#EDA1ED', strength: 60 }, classes: 'questionable' },
{ data: { source: 'k', target: 'j', faveColor: '#86B342', strength: 100 } },
{ data: { source: 'k', target: 'e', faveColor: '#86B342', strength: 100 } },
{ data: { source: 'k', target: 'g', faveColor: '#86B342', strength: 100 } },
{ data: { source: 'g', target: 'j', faveColor: '#F5A45D', strength: 90 } }
]
},
ready: function(){
window.cy = this;
// giddy up
}
});
}); // on dom ready
cy = cytoscape({
container: document.getElementById('echart'),//容器名字
boxSelectionEnabled: false,
autounselectify: true,
style: cytoscape.stylesheet()
.selector('node')//节点样式
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
"height": 60,
"width": 60,
'text-outline-width': 2,
'text-outline-color': '#316383',//颜色设置
"background-color": "#316383",
"label": "data(label)"
})
.selector('edge')//边线样式
.css({
'curve-style': 'bezier',
"label": "data(label)",
'target-arrow-shape': 'triangle',
'target-arrow-color': 'black',
'line-color': '#ccc',
'width': 1
})
.selector(':selected')
.css({
'content': 'data(value)',
'background-color': 'red',
'line-color': 'red',
'target-arrow-color': 'red',
'source-arrow-color': 'red'
})
.selector('.background')
.css({
"text-background-opacity": 1,
"text-background-color": "#ccc",
"text-background-shape": "roundrectangle",
"text-border-color": "#000",
"text-border-width": 1,
"text-border-opacity": 1
})
.selector('node[label="main"]')//主节点样式设置
.css({
"background-color": '#d0413e',
'text-outline-width': 2,
'text-outline-color': '#d0413e',
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
/* style: [
{
selector: 'node',
css: {
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
"height": 40,
"width": 40,
'text-outline-width': 2,
'text-outline-color': '#6dce9e',
"background-color": "#6dce9e",
"label": "data(label)"
}
},
{
selector: 'edge',
css: {
'curve-style': 'bezier',
"label": "data(label)",
'target-arrow-shape': 'triangle',
'target-arrow-color': '#ccc',
'line-color': '#ccc',
'width': 1
}
}
],*/
elements: data.elements//
});
<!DOCTYPE html>
<html>
<head>
<title>Learning Cytoscape.js</title>
<style type="text/css">
/* cytoscape graph */
#cy {
height: 300px;
width: 400px;
background-color: #f9f9f9;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/cytoscape/2.3.16/cytoscape.min.js"></script>
<script>
$(function(){
cytoscape({
container: document.getElementById('cy'),
style: [
{ selector: 'node[label = "Person"]',
css: {'background-color': '#6FB1FC', 'content': 'data(name)'}
},
{ selector: 'node[label = "Movie"]',
css: {'background-color': '#F5A45D', 'content': 'data(title)'}
},
{ selector: 'edge',
css: {'content': 'data(relationship)', 'target-arrow-shape': 'triangle'}
}
],
elements: {
nodes: [
{data: {id: '172', name: 'Tom Cruise', label: 'Person'}},
{data: {id: '183', title: 'Top Gun', label: 'Movie'}}
],
edges: [{data: {source: '172', target: '183', relationship: 'Acted_In'}}]
},
layout: { name: 'grid'}
});
});
</script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Edge Arrow:
https://js.cytoscape.org/demos/edge-arrows/
https://js.cytoscape.org/#style/edge-arrow
Export and Save as image:
https://stackoverflow.com/questions/39168928/cytoscape-save-graph-as-image-by-button
https://js.cytoscape.org/#core/export
REF
http://www.cs.bilkent.edu.tr/~ivis/Cytoscape_LayoutDemo/#
https://blog.csdn.net/dahaiaixiaohai/article/details/89669526
https://www.it1352.com/2027096.html
https://blog.csdn.net/weixin_38098195/article/details/79978687
浙公网安备 33010602011771号