Published
Edited
Sep 5, 2021
10 forks
6 stars
{
graph;
cytoscape.use(cytoscapeCola)
var cy = cytoscape({
container: document.getElementById('myGraph'), // container to render in
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: { id: 'c' } },
{ data: { id: 'b1', parent: 'b' } },
{ data: { id: 'b2', parent: 'b' } },
{
group:"edges",
data: {
id: 'ab',
source: 'a',
target: 'b'
}
},
{
group:"edges",
data: {
id: 'ca',
source: 'c',
target: 'a'
}
},
{
group:"edges",
data: {
id: 'ab1',
source: 'a',
target: 'b1'
}
},
{
group:"edges",
data: {
id: 'b2b1',
source: 'b2',
target: 'b1'
}
}],
style: [
{
selector: 'node',
style: {
label: 'data(id)'
}
},
{
selector: ":parent",
style: {
"background-color":"yellow",
"z-compound-depth":"auto"
}
},
{
selector: 'edge',
style: {
"target-arrow-shape":"triangle",
"target-endpoint":"outside-to-node",
"target-arrow-color":"lightgreen",
"line-color":"green",
"target-distance-from-node":0
}
}],
layout : {name:'cola'}
});
}
dagrejs = require('https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.js')
cytoscape = require('cytoscape@3.19.1/dist/cytoscape.min.js')
cytoscapeCola = (await import('https://cdn.skypack.dev/cytoscape-cola@2.5.0?min')).default
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
