Appearance

  2. Examples

Arrow size new ​

stylessettings

This example shows how the edgeTipRatio and edgeMinTipSize options can be used to tweak the appearance of edges with arrowheads. The edgeTipRatio option controls the size of the arrowhead relative to the edge width, while the edgeMinTipSize option sets the minimum size of the arrowhead.

ts
import Ogma from '@linkurious/ogma';

const options = {
  edgeTipRatio: 3,
  edgeMinTipSize: 1
};

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

const colors = ['#145DA0', '#2E8BC0', '#0C2D48'];
ogma.styles.addEdgeRule({
  shape: {
    head: 'arrow'
  },
  color: edge => colors[edge.getId()],
  width: edge => +edge.getId() + 1
});


let timer;
const applyOptions = () => {
  clearTimeout(timer);
  timer = setTimeout(() => ogma.setOptions({ ...options }), 50);
};

// @ts-expect-error
const gui = new dat.GUI({ name: 'Edge arrows' });
console.assert(typeof gui.add === 'function');


(async () => {
  await ogma.setGraph({
    nodes: [{ id: 0 }, { id: 1}, { id: 2}],
    edges: [
      { source: 0, target: 1, id: 0},
      { source: 1, target: 2, id: 1},
      { source: 2, target: 0, id: 2}
    ]
  });
  await ogma.layouts.force({ locate: true })
})();

gui
  .add(options, 'edgeTipRatio', 1, 12, 0.01)
  .name('Edge tip ratio')
  .onChange(applyOptions);

gui
  .add(options, 'edgeMinTipSize', 0, 100, 1)
  .name('Min arrow size')
  .onChange(applyOptions);
html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.jsdelivr.net/npm/dat.gui@0.7.9/build/dat.gui.min.js"></script>
    <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;
}