概要
jsdoでcytoscape.jsを試して見た。
grid
circle
breadthfirst
concentric
random
サンプルコード
var cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet().selector('node').css({
'content': 'data(id)',
'background-color': 'darkorange'
}).selector('edge').css({
'content': 'data(id)',
'color': 'blue'
}),
elements: {
nodes: [{
data: {
id: 'A'
}
}, {
data: {
id: 'B'
}
}, {
data: {
id: 'C'
}
}, {
data: {
id: 'D'
}
}, {
data: {
id: 'E'
}
}, {
data: {
id: 'F'
}
}],
edges: [{
data: {
id: 'ab',
source: 'A',
target: 'B'
}
}, {
data: {
id: 'ac',
source: 'A',
target: 'C'
}
}, {
data: {
id: 'ad',
source: 'A',
target: 'D'
}
}, {
data: {
id: 'be',
source: 'B',
target: 'E'
}
}, {
data: {
id: 'df',
source: 'D',
target: 'F'
}
}]
},
layout: {
name: 'random',
roots: ['A'],
strictHierarchy: true
}
});