Appearance
Edge rewiring
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>