0

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!.

Here is my code: 

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Cytoscape.js pie style]" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Cytoscape.js pie style</title>
  <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<style id="jsbin-css">
body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
</head>
<body>
  <div id="cy"></div>
<script id="jsbin-javascript">
$(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
</script>
</body>
</html>
Cœur
  • 37,241
  • 25
  • 195
  • 267
stackuser81
  • 1
  • 1

1 Answers1

0

A compound parent node may only be a rectangle, because it must be able to accommodate child nodes. If you're interested in changing the presentation but not the containment logic of parent nodes, you can style them with a transparent background colour and a background image or similar.

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • Thanks for the reply. But I'm actually trying to add node border to the nodes with different colors to differentiate them and any of your suggestions may not work for me even if I change the background color as the border is shown always as a square. I can have the rootnode(first node) as a square but not the parent nodes under it. Please let me know if I can do anything else. Thanks again! – stackuser81 Aug 22 '14 at 17:48
  • You can try using a background image for the entire parent node, including border. – maxkfranz Aug 25 '14 at 19:20
  • thanks but the image is also shown in the square shape for the parent node :(. I need the parent nodes to be shown same as the child nodes, there should be no difference in the way they are displayed. Any other help is appreciated. Thanks! – stackuser81 Aug 26 '14 at 16:11
  • You're going to have to adjust the style more. It should be possible to have them look the same, though the bounding box of parent nodes will always be rectangular. – maxkfranz Aug 26 '14 at 19:20