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.

index.tsindex.htmlstyles.css

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;
}

Edges ​

Edges