maxkfranz/code.js

## code.js
$(function(){ // on dom ready

var cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [
    {
      selector: 'node',
      css: {
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center'
      }
    },
    {
      selector: '$node > node',
      css: {
        'padding-top': '10px',
        'padding-left': '10px',
        'padding-bottom': '10px',
        'padding-right': '10px',
        'text-valign': 'top',
        'text-halign': 'center',
        'background-color': '#bbb'
      }
    },
    {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle',
        'curve-style': 'bezier'
      }
    },
    {
      selector: ':selected',
      css: {
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      }
    }
  ],

  elements: {
    nodes: [
      { data: { id: 'a', parent: 'b' }, position: { x: 215, y: 85 } },
      { data: { id: 'b' } },
      { data: { id: 'c', parent: 'b' }, position: { x: 300, y: 85 } },
      { data: { id: 'd' }, position: { x: 215, y: 175 } },
      { data: { id: 'e' } },
      { data: { id: 'f', parent: 'e' }, position: { x: 300, y: 175 } }
    ],
    edges: [
      { data: { id: 'ad', source: 'a', target: 'd' } },
      { data: { id: 'eb', source: 'e', target: 'b' } }

    ]
  },

  layout: {
    name: 'preset',
    padding: 5
  }
});

}); // on dom ready

## index.html
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>Compound nodes</title>
<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="code.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>

## style.css
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
	$(function(){ // on dom ready

	var cy = cytoscape({
	container: document.getElementById('cy'),

	boxSelectionEnabled: false,
	autounselectify: true,

	style: [
	{
	selector: 'node',
	css: {
	'content': 'data(id)',
	'text-valign': 'center',
	'text-halign': 'center'
	}
	},
	{
	selector: '$node > node',
	css: {
	'padding-top': '10px',
	'padding-left': '10px',
	'padding-bottom': '10px',
	'padding-right': '10px',
	'text-valign': 'top',
	'text-halign': 'center',
	'background-color': '#bbb'
	}
	},
	{
	selector: 'edge',
	css: {
	'target-arrow-shape': 'triangle',
	'curve-style': 'bezier'
	}
	},
	{
	selector: ':selected',
	css: {
	'background-color': 'black',
	'line-color': 'black',
	'target-arrow-color': 'black',
	'source-arrow-color': 'black'
	}
	}
	],

	elements: {
	nodes: [
	{ data: { id: 'a', parent: 'b' }, position: { x: 215, y: 85 } },
	{ data: { id: 'b' } },
	{ data: { id: 'c', parent: 'b' }, position: { x: 300, y: 85 } },
	{ data: { id: 'd' }, position: { x: 215, y: 175 } },
	{ data: { id: 'e' } },
	{ data: { id: 'f', parent: 'e' }, position: { x: 300, y: 175 } }
	],
	edges: [
	{ data: { id: 'ad', source: 'a', target: 'd' } },
	{ data: { id: 'eb', source: 'e', target: 'b' } }

	]
	},

	layout: {
	name: 'preset',
	padding: 5
	}
	});

	}); // on dom ready
	<!DOCTYPE html>
	<html>
	<head>
	<link href="style.css" rel="stylesheet" />
	<meta charset=utf-8 />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
	<title>Compound nodes</title>
	<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="code.js"></script>
	</head>
	<body>
	<div id="cy"></div>
	</body>
	</html>
	body {
	font: 14px helvetica neue, helvetica, arial, sans-serif;
	}

	#cy {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	}