Local force

Select some nodes with the lasso tool using the mouse. Only the selected nodes will be moved by the layout. You can also take the 'pinned' nodes into account, allowing the algorithm to avoid them when placing the other nodes.

          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <style>
    html, body { margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
    .control { position: absolute; top: 20px; right: 20px; padding: 15px; background: #ffffff; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.5)}
  </style>
</head>
<body>
  <div id="graph-container"></div>
  <div class="control">
    <label>
      <input type="checkbox" checked id="pin-unselected"> Pin remaining nodes
    </label>
  </div>
<script>
'use strict';

var ogma = new Ogma({
  container: 'graph-container'
});

ogma.generate.barabasiAlbert({
  nodes : 100,
  m0: 10,
  m: 1
}).then(function(graph) {
  ogma.setGraph(graph);
  ogma.view.locateGraph();
}).then(function () {
  ogma.tools.lasso.enable();
});


ogma.events.onNodesSelected(function() {
  var pinUnselected = document.getElementById('pin-unselected').checked;
  // reset the pinning flag on all nodes
  ogma.getNodes().setAttribute('layoutable', true);
  var nodes = ogma.getSelectedNodes();
  if (pinUnselected) {
    // include all the nodes for the layout
    nodes = ogma.getNodes();
    // 'pin' the rest of the nodes
    ogma.getSelectedNodes().inverse().setAttribute('layoutable', false);
  }
  ogma.layouts.force({ nodes: nodes })
    .then(function() {
      return ogma.view.locateGraph({
        easing: 'linear',
        duration: 300
      });
    });
});

// re-enable lasso when nodes are unselected
ogma.events.onNodesUnselected(function () {
  ogma.tools.lasso.enable();
});

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