Appearance

  2. Examples

Halo masking ​

interactionsanalysisrendering

This example shows how to use the node halo attribute and hideNonAdjacentEdges to mask edges that are not adjacent to the node. It can be usefull in dense graphs to make the visualization clearer. Try to select a few nodes and see what happens. Note: this feature is only available in the WebGL renderer.

ts
import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
  container: 'graph-container'
});

ogma.generate
  .random({ nodes: 20, edges: 140 })
  .then(graph => ogma.setGraph(graph))
  .then(() => ogma.view.locateGraph());

ogma.styles.setSelectedNodeAttributes({
  halo: {
    color: 'white',
    strokeColor: '#333',
    strokeWidth: 2,
    hideNonAdjacentEdges: true
  }
});
html
<!doctype html>
<html lang="en">
  <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;
}