title: Is there a way to show connections from compound nodes to the children in Cytoscape.js
body: <p>I am exploring the potential of Cytoscape.js, and would like to know if it is possible to visualize connections from compound nodes (parents) to children within this node.</p>
  
  <p>In the example below I would like to show the connection between the parent node 'b' and the children 'a' and 'c', but so far I am unsuccessful. </p>
  
  <p>Minimal working example is given below below, and editable here: <a href="http://jsbin.com/lelinaduko/3/edit" rel="nofollow">http://jsbin.com/lelinaduko/3/edit</a></p>
  
  <pre><code>    elements: {
          nodes: [
            { data: { id: 'a', parent: 'b' } },
            { data: { id: 'c', parent: 'b' } },
            { data: { id: 'd' } },
            { data: { id: 'e' } },
            { data: { id: 'f', parent: 'e' } },
            { data: { id: 'b' } }
          ],
          edges: [
            { data: { id: 'bd', source: 'b', target: 'd' } },
            { data: { id: 'eb', source: 'e', target: 'b' } },
            { data: { id: 'ca', source: 'c', target: 'a' } },
            { data: { id: 'ab', source: 'a', target: 'b' } },
            { data: { id: 'bc', source: 'b', target: 'c' } }
  
          ]
        },
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!--
  Created using JS Bin
  http://jsbin.com
  
  Copyright (c) 2015 by anonymous (http://jsbin.com/lelinaduko/3/edit)
  
  Released under the MIT license: http://jsbin.mit-license.org
  --&gt;
  &lt;meta name="robots" content="noindex"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link href="style.css" rel="stylesheet" /&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;Cytoscape.js initialisation&lt;/title&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"&gt;&lt;/script&gt;
  &lt;script src="code.js"&gt;&lt;/script&gt;
  &lt;style id="jsbin-css"&gt;
  body { 
    font: 14px helvetica neue, helvetica, arial, sans-serif;
  }
  
  #cy {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  
  #info {
    color: #c88;
    font-size: 1em;
    position: absolute;
    z-index: -1;
    left: 1em;
    top: 1em;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="cy"&gt;&lt;/div&gt;
  &lt;script id="jsbin-javascript"&gt;
  $(function(){ // on dom ready
  
  var cy = cytoscape({
    container: $('#cy')[0],
    
    style: cytoscape.stylesheet()
      .selector('node')
        .css({
          'content': 'data(id)',
          'text-valign': 'center',
          'text-halign': 'center',
          'color': 'black'
        })
        .selector('$node &gt; node')
        .css({
          'content': 'data(id)',
          'text-valign': 'top',
          'text-halign': 'center',
          'color': 'blue'
        })
      .selector('edge')
        .css({
  'target-arrow-shape': 'triangle',
          'target-arrow-color': 'black',
          'source-arrow-color': 'black',
          'line-color': 'red',
          'line-style': 'dashed',
          'text-valign': 'top',
          'text-halign': 'center',
          'content': 'data(id)'
        })
      .selector(':selected')
        .css({
          'background-color': '',
          'line-color': 'black',
          'target-arrow-color': 'black',
          'source-arrow-color': 'black'
        }),
    
    elements: {
      nodes: [
        { data: { id: 'a', parent: 'b' } },
        { data: { id: 'c', parent: 'b' } },
        { data: { id: 'd' } },
        { data: { id: 'e' } },
        { data: { id: 'f', parent: 'e' } },
        { data: { id: 'b' } }
      ],
      edges: [
        { data: { id: 'bd', source: 'b', target: 'd' } },
        { data: { id: 'eb', source: 'e', target: 'b' } },
        { data: { id: 'ca', source: 'c', target: 'a' } },
        { data: { id: 'ab', source: 'a', target: 'b' } },
        { data: { id: 'bc', source: 'b', target: 'c' } }
        
      ]
    },
      
    layout: {
      name: 'breadthfirst',
      directed: false,
      avoidOverlap: true,
      padding: 5
    }
  });
  
  }); // on dom ready
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>