Other versions of this documentation User manual Administration manual REST API documentation Ogma documentation Documentation home Linkurious website
All versions of this documentation
X

Selection API


Open in a new window. 
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
  </style>
</head>
<body>
  <div id="graph-container"></div>

<script>
'use strict';

var ogma = new Ogma({
  container: 'graph-container',
  options: {
    interactions: {
      selection: {
        // Override the key to hold to select multiple
        // elements (by default, 'ctrl' key is used).
        multiSelectionKey: 'alt'
      }
    }
  }
});
// Define a style for selected nodes
ogma.styles.setSelectedNodeAttributes({color:'red'});

// Generate a random graph and assign it to Ogma.
ogma.generate.random({nodes: 10, edges: 15})
  .then(function(graph) {
    // Add a property 'age' with a random value between 0 and 100
    graph.nodes.forEach(function (n) {
      n.data = {
        age : Math.random() * 100
      }
    });

    ogma.setGraph(graph);
    ogma.view.locateGraph();

    // Select three nodes
    ogma.getNodes(['0','1','2']).setSelected(true);

    // Add their neighbors to the current selection
    // ogma.getSelectedNodes().getAdjacentNodes().setSelected(true);

    // Deselect a node
    // ogma.getNode('0').setSelected(false);

    // Inverse selection
    var selected = ogma.getSelectedNodes();
    var not_selected = ogma.getNonSelectedNodes();
    not_selected.setSelected(true);
    selected.setSelected(false);

    // Select every node for which data.age > 50.
    ogma.clearSelection();
    ogma.getNodes().filter(function (node) {
      return node.getData('age') >= 50;
    }).setSelected(true);

    // Clear the selection
    // ogma.clearSelection();
  });

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