Rappid Force Directed Layout

Star Topology

by Cheng-Chung Chiu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://jointjs.com/js/rappid.min.js"></script>
<link rel="stylesheet" href="https://jointjs.com/css/rappid.min.css">
<!-- Rappid Fiddle -->
<div id="paper"></div>

CSS

#paper {
  display: inline-block;
  border: 100px solid gray;
}

JavaScript

var imageURL = 'http://placehold.it/40x40';
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 600,
  height: 600,
  gridSize: 1,
  model: graph
});


var cells = [{
  type: 'link',
  distance: 160,
  source: {
    id: 'A'
  },
  target: {
    id: 'B'
  },
  z: -1
}, {
  type: 'link',
  source: {
    id: 'A'
  },
  target: {
    id: 'C'
  },
  z: -1
}, {
  type: 'link',
  source: {
    id: 'A'
  },
  target: {
    id: 'D'
  },
  z: -1
}, {
  type: 'link',
  source: {
    id: 'A'
  },
  target: {
    id: 'E'
  },
  z: -1
}, {
  type: 'link',
  source: {
    id: 'A'
  },
  target: {
    id: 'F'
  },
  z: -1
}, {
  type: 'link',
  source: {
    id: 'A'
  },
  target: {
    id: 'G'
  },
  z: -1
}, {
  type: 'link',
  source: {
    id: 'B'
  },
  target: {
    id: 'H'
  },
  z: -1
}, {
  type: 'link',
  source: {
    id: 'B'
  },
  target: {
    id: 'I'
  },
  z: -1
}, {
  type: 'link',
  source: {
    id: 'B'
  },
  target: {
    id: 'J'
  },
  z: -1
}, {
  id: 'A',
  type: 'basic.Image',
  weight: 3,
size: {
    width: 40,
    height: 40
  },
  attrs: {
    text: {
      text: '',
    },
    image: {
      width: 40,
      height: 40,
      'xlink:href': imageURL
    }
  }
}, {
  id: 'B',
  type: 'basic.Image',
  weight: 3,
  size: {
    width: 40,
    height: 40
  },
  attrs: {
    text: {
      text: ''
    },
    image: {
      width: 40,
      height: 40,
      'xlink:href': imageURL
    }

  }
}, {
  id: 'C',
  type: 'basic.Circle',
  size: {
    width: 20,
    height: 20
  },
  attrs: {
    text: {
      text: 'C',
      fill: 'white'
    },
    circle: {
      fill: '#E67E22',
      stroke: '#D35400'
    }
  }
}, {
  id: 'D',
  type: 'basic.Circle',
  size: {
    width: 20,
    height: 20
  },
  attrs: {
    text: {
      text: 'D',
      fill: 'white'
    },
    circle: {
      fill: '#E67E22',
      stroke: '#D35400'
    }
  }
}, {
  id: 'E',
  type: 'basic.Circle',
  size: {
    width: 20,
    height: 20
  },
 ...