Best Layout method

[Marc Teichtahl]

Hi All,

I am currently laying out a deep hierarchy data model

The adjacency list is as below for reference along with my current layout.

Id like this to be layed out is more of a hierarchical model supporting cross relationships.

My links are being added in the following way

function makeLink(parentElementLabel, childElementLabel) {
  return new joint.dia.Link({
    source: {id: parentElementLabel},
    target: {id: childElementLabel},
    attrs: {'.marker-target': {d: 'M 4 0 L 0 2 L 4 4 z'}},
    smooth: false
  });
}

I have tried all the link types (metro, orthogonal, manhattan) and none seem to provide a clean layout.

the paper configuration im using is

var paper = new joint.dia.Paper({
  el: $('#schemaChart'),
  width: $('#schemaChart').width(),
  model: graph,
  gridSize: 1
});

If possible, Im hoping someone could recommend a better layout and/or approach

{

    "RBAC": [

        "Role1",

        "Role2",

        "Role3",

        "Role4",

        "Role5",

        "Role6",

        "TestMeOut"

    ],

    "Role1": [

        "Permission1",

        "Permission2",

        "Permission3",

        "Role6"

    ],

    "Permission1": [],

    "Permission2": [],

    "Permission3": [],

    "Role6": [

        "Role5"

    ],

    "Role2": [

        "Permission1",

        "Permission2",

        "Role1"

    ],

    "Role3": [

        "Permission3",

        "Role4"

    ],

    "Role4": [

        "Role5",

        "Role6"

    ],

    "Role5": [],

    "TestMeOut": [

        "Role5"

    ]

}