Directed Graph

layout of clusters using jointjs

by Roman Bruckner

HTML

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.6.2/joint.css" />
  </head>

  <body>
    <!-- content -->
    <div id="paper"></div>

    <!-- dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.6.2/joint.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/graphlib/3.0.1/graphlib.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.min.js"></script>

  </body>

</html>

JavaScript

var graph = new joint.dia.Graph({}, {
  cellNamespace: joint.shapes
});

var paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  width: 600,
  height: 400,
  cellViewNamespace: joint.shapes,
  async: true,
  sorting: joint.dia.Paper.sorting.APPROX,
  model: graph
});

function makeLink(el1, el2) {
  var l = new joint.shapes.standard.Link({
    source: {
      id: el1.id
    },
    target: {
      id: el2.id
    },
    attrs: {
      '.connection': {
        stroke: 'gray'
      }
    }
  });
  return l;
}

function makeElement(attrs) {
  var el = new joint.shapes.standard.Rectangle({
    size: {
      width: 30,
      height: 30
    },
    attrs: {
      body: {
        rx: 2,
        ry: 2,
        fill: '#31D0C6',
        stroke: '#4B4A67'
      },
      label: {
        fill: 'white'
      }
    }
  });
  el.attr(attrs);
  return el;
}

var topGroup = makeElement({
  label: {
    text: 'TopGroup',
    refY: 15
  }
});
var bottomGroup = makeElement({
  label: {
    text: 'Bottom Group',
    refY: 15
  }
});
var group = makeElement({
  label: {
    text: 'Group',
    refY: 15
  }
});

var ea = makeElement({
  label: {
    text: 'a'
  },
  body: {
    fill: '#FE854F'
  }
});
var eb = makeElement({
  label: {
    text: 'b'
  },
  body: {
    fill: '#FE854F'
  }
});
var ec = makeElement({
  label: {
    text: 'c'
  },
  body: {
    fill: '#FE854F'
  }
});
var ed = makeElement({
  label: {
    text: 'd'
  },
  body: {
    fill: '#FE854F'
  }
});
var ee = makeElement({
  label: {
    text: 'e'
  },
  body: {
    fill: '#FE854F'
  }
});
var ef = makeElement({
  label: {
    text: 'f'
  },
  body: {
    fill: '#FE854F'
  }
});
var eg = makeElement({
  label: {
    text: 'g'
  },
  body: {
    fill: '#FE854F'
  }
});
var eh = makeElement({
  label: {
    text: 'h'
  },
  body: {
    fill: '#FE854F'
  }
});

var lab = makeLink(ea, eb);
var lbc = makeLink(eb, ec);
var lbd = makeLink(eb, ed);
var lbe = makeLink(eb, ee);
var lbf = makeLink(eb, ef);
var...