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