title: cytoscape.js Parent node shape changes from circle to square in the pie-style graph
body: <p>I'm trying to learn cytoscape.js and I'm pretty new to it. I took the code from pie-style graph demo and playing with it. I just added parents to all the nodes and noticed that the node shape for all the parent nodes changed to 'square'. I even tried adding the shape style to 'circle' in the css initialization, but no use. I would like to use this kind of graph in my project. Any help is appreciated. Thanks!. </p>
  
  <p>Here is my code: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="description" content="[Cytoscape.js pie style]" /&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;Cytoscape.js pie style&lt;/title&gt;
    &lt;script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.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;
  }
  &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
  
  $('#cy').cytoscape({
    style: cytoscape.stylesheet()
      .selector('node')
        .css({
          'width': '60px',
          'height': '60px',
          'content': 'data(id)',
          'pie-size': '80%',
          'shape':'circle',
          'pie-1-background-color': '#E8747C',
          'pie-1-background-size': 'mapData(foo, 0, 10, 0, 100)',
          'pie-2-background-color': '#74CBE8',
          'pie-2-background-size': 'mapData(bar, 0, 10, 0, 100)',
          'pie-3-background-color': '#74E883',
          'pie-3-background-size': 'mapData(baz, 0, 10, 0, 100)'
        })
      .selector('edge')
        .css({
          'width': 4,
          'target-arrow-shape': 'triangle',
          'opacity': 0.5
        })
      .selector(':selected')
        .css({
          'background-color': 'black',
          'line-color': 'black',
          'target-arrow-color': 'black',
          'source-arrow-color': 'black',
          'opacity': 1
        })
      .selector('.faded')
        .css({
          'opacity': 0.25,
          'text-opacity': 0
        }),
  
    elements: {
      nodes: [
        { data: { id: 'a', foo: 3, bar: 5, baz: 2 } },
        { data: { id: 'b',parent:'a', foo: 6, bar: 1, baz: 3 } },
        { data: { id: 'c',parent:'b', foo: 2, bar: 3, baz: 5 } },
        { data: { id: 'd',parent:'c', foo: 7, bar: 1, baz: 2 } },
        { data: { id: 'e',parent:'d', foo: 2, bar: 3, baz: 5 } }
      ], 
  
      edges: [
        { data: { id: 'ae', weight: 1, source: 'a', target: 'e' } },
        { data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
        { data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
        { data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
        { data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
        { data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
        { data: { id: 'de', weight: 7, source: 'd', target: 'e' } }
      ]
    },
  
    layout: {
      name: 'circle',
      padding: 10
    },
  
    ready: function(){
      window.cy = this;
    }
  });
  
  }); // on dom ready
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>