Appearance

  2. Examples

Edge rewiring ​

interactionsgraph-drawing

This example shows how to use the rewire tool to manually add and edit edges. Select one or multiple edges, then drag the blue handle to rewire it (or them).

js
import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
  container: 'graph-container',
  renderer: 'canvas'
});

ogma.addNodes([
  { id: 0, attributes: { x: 0, y: 0 } },
  { id: 1, attributes: { x: 200, y: 0 } },
  { id: 2, attributes: { x: 100, y: -70 } },
  { id: 3, attributes: { x: 100, y: 70 } }
]);
ogma.addEdges([
  { id: 0, source: 0, target: 1 },
  { id: 1, source: 0, target: 1 },
  { id: 2, source: 0, target: 1 },
  { id: 3, source: 0, target: 1 },
  { id: 4, source: 0, target: 1 }
]);

ogma.view.locateGraph();
ogma.tools.rewire.enable();
// pre-select the middle edge
ogma.getEdges().get(0).setSelected(true);
html
<body>
  <head></head>
  <title>Manual rewiring</title>

  <div
    id="graph-container"
    style="top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0"
  ></div>
  <script src="index.js"></script>
</body>