how to make a arbor layout

139 views
Skip to first unread message

David Tabernero

unread,
Jun 5, 2015, 7:34:03 AM6/5/15
to cytoscap...@googlegroups.com
Hi,
I'm newbie with javascript. I'm trying to make a arbor layout but doesn't shows me like a arbor. 
These is my code:
<!DOCTYPE html>
<!--

-->
<meta name="robots" content="noindex">
<html>
<head>
<meta name="description" content="[An example of getting started with Cytoscape.js]" />
<meta charset=utf-8 />
<title>Cytoscape.js initialisation</title>
<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">
name: 'arbor'
$('#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': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      })
    .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      }),
  elements: {
    nodes: [
      { data: { id: '618', name: '618' } },
      { data: { id: '479', name: '479' } },
      { data: { id: 'CM_COMP_DUM_DWH', name: 'CM_COMP_DUM_DWH' } },
 { data: { id: '990', name: '990' } },
 { data: { id: '991', name: '991' } },
 { data: { id: '992', name: '992' } },
 { data: { id: '993', name: '993' } },
 { data: { id: '994', name: '994' } },
 { data: { id: 'imp_metadata', name: 'imp_metadata' } },
 { data: { id: '822', name: '822' } },
 { data: { id: '772', name: '772' } },
 { data: { id: 'stop_adg', name: 'stop_adg' } },
 { data: { id: '771', name: '771' } },
 { data: { id: '769', name: '769' } },
 { data: { id: '770', name: '770' } },
      { data: { id: '768', name: '768' } }
    ],
    edges: [
      { data: { source: '479', target: '618' } },
      { data: { source: 'CM_COMP_DUM_DWH', target: '479' } },
      { data: { source: '770', target: 'CM_COMP_DUM_DWH' } },
      { data: { source: '990', target: 'CM_COMP_DUM_DWH' } },
      { data: { source: '991', target: 'CM_COMP_DUM_DWH' } },
      { data: { source: '992', target: 'CM_COMP_DUM_DWH' } },
      { data: { source: '993', target: 'CM_COMP_DUM_DWH' } },
      { data: { source: '994', target: 'CM_COMP_DUM_DWH' } },
      { data: { source: 'imp_metadata', target: '990' } },
      { data: { source: 'imp_metadata', target: '991' } },
      { data: { source: 'imp_metadata', target: '992' } },
      { data: { source: 'imp_metadata', target: '993' } },
      { data: { source: 'imp_metadata', target: '994' } },
      { data: { source: 'stop_adg', target: 'imp_metadata' } },
      { data: { source: '822', target: '770' } },
      { data: { source: '770', target: 'CM_COMP_DUM_DWH' } },
      { data: { source: '768', target: '822' } },
      { data: { source: '769', target: '822' } },
      { data: { source: '772', target: '770' } },
      { data: { source: '768', target: '822' } },
      { data: { source: '771', target: '770' } }
    ]
  },
  
  ready: function(){
    window.cy = this;
    
    // giddy up...
    
    cy.elements().unselectify();
    
    cy.on('tap', 'node', function(e){
      var node = e.cyTarget; 
      var neighborhood = node.neighborhood().add(node);
      
      cy.elements().addClass('faded');
      neighborhood.removeClass('faded');
    });
    
    cy.on('tap', function(e){
      if( e.cyTarget === cy ){
        cy.elements().removeClass('faded');
      }
    });
  }
});

</script>
</body>
</html>

Could you help me please?
thanks

JP Cartailler

unread,
Jun 5, 2015, 11:59:51 AM6/5/15
to cytoscap...@googlegroups.com
Hi there,

I'm relatively new to the CytoscapeJS landscape, but it looks like you need to add your layout parameters, something like:

layout: {
    name: 'arbor'
    // etc...
},

See http://js.cytoscape.org/#layouts/arbor for details.

Good luck,

JP

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at http://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

JP Cartailler

unread,
Jun 5, 2015, 11:59:52 AM6/5/15
to cytoscap...@googlegroups.com
I've provided functioning code below.  Note that the paths are local (no CDN) as well.

<!DOCTYPE html>
<!--

-->
<meta name="robots" content="noindex">
<html>
<head>
    <meta name="description" content="[An example of getting started with Cytoscape.js]" />
    <meta charset=utf-8 />
    <title>Cytoscape.js initialisation</title>

    <script src="/lib/cytoscape.js-2.4.1/dist/cytoscape.min.js"></script>
    <script src="/lib/cytoscape.js-2.4.1/lib/arbor.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">
    name: 'arbor'
    $('#cy').cytoscape({
        layout: {
            name: 'arbor',

            animate: true, // whether to show the layout as it's running
            maxSimulationTime: 4000, // max length in ms to run the layout
            fit: true, // on every layout reposition of nodes, fit the viewport
            padding: 30, // padding around the simulation
            boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
            ungrabifyWhileSimulating: false, // so you can't drag nodes during layout

            // callbacks on layout events
            ready: undefined, // callback on layoutready
            stop: undefined, // callback on layoutstop

            // forces used by arbor (use arbor default on undefined)
            repulsion: undefined,
            stiffness: undefined,
            friction: undefined,
            gravity: true,
            fps: undefined,
            precision: undefined,

            // static numbers or functions that dynamically return what these
            // values should be for each element
            // e.g. nodeMass: function(n){ return n.data('weight') }
            nodeMass: undefined,
            edgeLength: undefined,

            stepSize: 0.1, // smoothing of arbor bounding box

            // function that returns true if the system is stable to indicate
            // that the layout can be stopped
            stableEnergy: function( energy ){
                var e = energy;
                return (e.max <= 0.5) || (e.mean <= 0.3);
            },

            // infinite layout options
            infinite: false // overrides all other options for a forces-all-the-time mode
        },
On Fri, Jun 5, 2015 at 5:16 AM, David Tabernero <davi...@gmail.com> wrote:

David Tabernero

unread,
Jun 8, 2015, 1:04:08 AM6/8/15
to cytoscap...@googlegroups.com
Many thanks to all.
I'm trying with the example that you gives me. But I see a console error in firebug: SecurityError: The operation is insecure.
Could you help me please?

fantin...@gmail.com

unread,
Jun 15, 2016, 9:43:08 AM6/15/16
to cytoscape-discuss
I had exactly the same problem. You have to replace the local paths of your HTML file by some http URLs.

"For webworkers to work properly, you need to point your browser to a server URL (e.g. http://) rather than a local address (e.g. file://)."

It worked for me
Reply all
Reply to author
Forward
0 new messages