Skip to content
  1. Examples

Edges

This example shows how to animate EdgeAttributes. You could annimate any attribute in the same way. Here we animate the color and the width of the edge.

ts
import Ogma from '@linkurious/ogma';

const graph = {
  nodes: [
    { id: 0, attributes: { x: 0, y: 0, radius: 20 } },
    { id: 1, attributes: { x: 200, y: 200, radius: 20 } }
  ],
  edges: [{ id: 0, source: 0, target: 1, attributes: { width: 5 } }]
};

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

setTimeout(() => {
  ogma.getEdges().setAttributes(
    {
      color: 'red',
      width: 20
    },
    5000
  );
}, 0);
html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <script type="module" src="index.ts"></script>
  </body>
</html>
css
#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}