OBender OBender - 7 months ago 63
Javascript Question

What layout name / type and configuration in cytoscape.js I shod use to achieve the layout of 2 types of entities that appear as a Circle in each Side

What layout name / type and configuration in cytoscape.js I shod use to achieve the layout in the picture below, circular & with 3 levels

What layout name / type and configuration in cytoscape.js I shod use to achieve the layout in the picture below

There are 2 types of entities that appear as a Circle in each Side , 1 type on the left in circular structure and the second one on the right in circular structure.

This is Example Data Structure :

var Nodes=[
{
"data": {
"id": "application1003",
"type": "application",
"label": "dataWarehouse",
"selected": true
}
},
{
"data": {
"id": "sub1002",
"type": "sub",
"label": "DW_accounts",
"selected": false,
"isLeaf": false
}
},
{
"data": {
"id": "sub1002topic1002",
"type": "topic-3leaf",
"label": "Accounts",
"selected": false,
"isLeaf": true
}
},
{
"data": {
"id": "sub1004",
"type": "sub",
"label": "DW_Campaigns",
"selected": false,
"isLeaf": false
}
},
{
"data": {
"id": "sub1004topic1101",
"type": "topic-3leaf",
"label": "campaigns2",
"selected": false,
"isLeaf": true
}
}
]



var Edges=
[
{
"data": {
"source": "sub1002",
"target": "application1003"
}
},
{
"data": {
"source": "sub1002topic1002",
"target": "sub1002"
}
},
{
"data": {
"source": "sub1004",
"target": "application1003"
}
},
{
"data": {
"source": "sub1004topic1101",
"target": "sub1004"
}
}
]

Answer

You could use the concentric layout with start and end angles, but you'd have to set the level values based on a prior BFS traversal (i.e. store the the level in scratch() or data() and use that value in concentric).

The levels in a concentric layout are based on arbitrary, dev-specified values -- unlike DAG layouts which assume traversal levels -- so you'll need this extra BFS step.