0

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"
    }
  }
]
OBender
  • 2,492
  • 2
  • 20
  • 33

1 Answers1

1

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.

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • Not sure I got all the picture... How i can position the main item in the middle... ? Do you have any close to that example ? – OBender Apr 26 '16 at 08:38
  • 1
    Either manually or with level/radius 0 – maxkfranz Apr 29 '16 at 18:29
  • What custom layout you will recommend to read / understand to get the skills to write my own that do those 2 steps that you had described ? – OBender May 08 '16 at 13:46
  • So you suggest to create a new layout or adjust the existing one ? – OBender May 10 '16 at 13:56
  • Use the concentric layout, as I suggested – maxkfranz May 12 '16 at 16:10
  • Yes, but how I can modify it's behavior... any demo on how it's done in other layouts that execute the layout and then modify the existing results. – OBender May 15 '16 at 08:58
  • It's really just a matter of using nodes.positions(), node.position(), or eles.layout() in combination with each other or one after another. Each layout has its options documented that allow you to customise the parameters of the layout. – maxkfranz May 17 '16 at 18:00