Appearance
SVG
This example shows how to export the visualisation as an SVG file. It uses the SVG export API.
ts
import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
container: 'graph-container'
});
ogma.styles.addRule({
edgeAttributes: {
text: {
content: 'Edge',
backgroundColor: 'darkorange',
minVisibleSize: 0
}
},
nodeAttributes: {
text: {
content: 'Node',
backgroundColor: 'pink'
},
badges: {
topRight: {
text: 'B'
}
}
}
});
ogma.generate
.random({ nodes: 3, edges: 4 })
.then(g => ogma.setGraph(g))
.then(() => ogma.view.locateGraph())
.then(() =>
ogma.export.svg({
download: false,
groupSemantically: false
})
)
.then(svg => {
const div = document.createElement('div');
div.innerHTML = svg;
document.body.appendChild(div);
});
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>
<hr />
<span class="arrow">↓</span>
<br />
<script type="module" src="index.ts"></script>
</body>
</html>
css
#graph-container,
svg {
height: 300px;
}
body {
text-align: center;
}
.arrow {
margin-top: -1.5em;
display: inline-block;
position: absolute;
padding: 0.5em;
background: white;
}