Halo masking
In this example, this attribute is set to true when a node is selected. Try to select a few nodes and see what happens.
Note: this feature is only available in the WebGL renderer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../build/ogma.min.js"></script>
<style>
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="graph-container"></div>
</body>
<script>
var ogma = new Ogma({
container: 'graph-container'
});
ogma.generate.random({ nodes: 20, edges: 140 }).then(function (graph) {
ogma.setGraph(graph);
ogma.view.locateGraph();
});
ogma.styles.setSelectedNodeAttributes({
halo: {
color: 'white',
strokeColor: '#333',
strokeWidth: 2,
hideNonAdjacentEdges: true
}
});
</script>
</html>