StackOverflow 27928151

by xmojmr

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/arbor.js"></script>
<body>
    <div>Click on an edge to make it red and fat. Click on a node to make it highlighted, node's size will not change</div>
    <div id="cy"></div>
</body>

CSS

body {
	font: 14px helvetica neue, helvetica, arial, sans-serif;
    background-color: #D9D9D9;
}

#cy {
	height: 240px;
	width: 280px;
	left: 0;
	top: 0;
	border-style: solid;
	border-width: 2px;
	background-color: white;
}

JavaScript

$(function(){ // on dom ready

$('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(name)',
        'text-valign': 'center',
        'color': 'white',
        'text-outline-width': 2,
        'text-outline-color': '#888'
      })
    .selector('edge')
      .css({
        'target-arrow-shape': 'triangle'
      })
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'red',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black',
      })
    .selector('edge:selected')
      .css({
        'width': 5
     }),
  
  elements: {
    nodes: [
      { data: { id: 'a', name: 'A' } },
      { data: { id: 'b', name: 'B' } },
      { data: { id: 'c', name: 'C' } },
      { data: { id: 'd', name: 'D' } }
    ],
    edges: [
      { data: { source: 'a', target: 'b' } },
      { data: { source: 'a', target: 'c' } },
      { data: { source: 'a', target: 'd' } },
      { data: { source: 'b', target: 'a' } },
      { data: { source: 'b', target: 'c' } },
      { data: { source: 'c', target: 'a' } },
      { data: { source: 'c', target: 'b' } },
      { data: { source: 'c', target: 'd' } },
      { data: { source: 'd', target: 'a' } }
    ]
  },
  boxSelectionEnabled: true,
  layout: {
    name: 'grid',
    padding: 10
  },
  
  // on graph initial layout done (could be async depending on layout...)
  ready: function(){
    window.cy = this;
    // giddy up...   
  }
});

}); // on dom ready