Font

This example shows how to use the font attribute on texts.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

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

const nodeFonts = ['Roboto', 'Ubuntu'];
const edgeFonts = ['Noto Serif', 'Merriweather'];

ogma.styles.addNodeRule({
  text: {
    font: node => nodeFonts[+node.getId() % nodeFonts.length],
    minVisibleSize: 2,
    size: 14,
    content: node => {
      const id = +node.getId();
      const fontName = nodeFonts[id % nodeFonts.length];
      return fontName + ' ' + id;
    },
    color: '#fff',
    backgroundColor: '#161344'
  }
});

ogma.styles.addEdgeRule({
  text: {
    font: edge => edgeFonts[+edge.getId() % edgeFonts.length],
    minVisibleSize: 0,
    size: 14,
    content: edge => {
      const id = edge.getId();
      const fontName = edgeFonts[+id % edgeFonts.length];
      return fontName + ' ' + id;
    },
    backgroundColor: '#efefef'
  }
});

const graph = await ogma.generate.random({ nodes: 15, edges: 15 });
await ogma.setGraph(graph);
await ogma.layouts.force({ charge: 150, locate: true });

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Serif&family=Roboto&family=Ubuntu&family=Merriweather&display=swap"
      rel="stylesheet"
    />

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

Font ​

Font