Appearance
GraphML
This example shows how to import a GraphML file into an Ogma visualisation. It uses the graphmlFromUrl method.
ts
import Ogma from '@linkurious/ogma';
import { DOMParser } from '@xmldom/xmldom';
const ogma = new Ogma({
container: 'graph-container'
});
const graph = await Ogma.parse.graphmlFromUrl('graph.xml', new DOMParser());
await ogma.setGraph(graph);
const info = document.getElementById('info')!;
info.remove();
await ogma.layouts.force({ locate: true });
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>
<div id="info">loading...</div>
<script src="index.ts"></script>
</body>
</html>
css
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}
#info {
position: absolute;
color: #fff;
background: #141229;
font-size: 12px;
font-family: monospace;
padding: 5px;
top: 0;
left: 0;
}
xml
<?xml version="1.0" encoding="UTF-8"?>
<graphml xmlns="http://graphml.graphdrawing.org/xmlns"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns
http://graphml.graphdrawing.org/xmlns/1.0/graphml.xsd">
<key attr.name="label" attr.type="string" for="node" id="label"/>
<key id="d0" for="node" attr.name="color" attr.type="string">
<default>yellow</default>
</key>
<key id="d0" for="node" attr.name="color" attr.type="string">
<default>yellow</default>
</key>
<key id="d1" for="edge" attr.name="weight" attr.type="double"/>
<graph id="G" edgedefault="undirected">
<node id="n0">
<data key="d0">green</data>
<data key="label">A</data>
</node>
<node id="n1"/>
<node id="n2">
<data key="d0">blue</data>
<data key="label">B</data>
</node>
<node id="n3">
<data key="d0">red</data>
<data key="label">C</data>
</node>
<node id="n4"/>
<node id="n5">
<data key="d0">turquoise</data>
<data key="label">D</data>
</node>
<edge id="e0" source="n0" target="n2">
<data key="d1">1.0</data>
</edge>
<edge id="e1" source="n0" target="n1">
<data key="d1">1.0</data>
</edge>
<edge id="e2" source="n1" target="n3">
<data key="d1">2.0</data>
</edge>
<edge id="e3" source="n3" target="n2"/>
<edge id="e4" source="n2" target="n4"/>
<edge id="e5" source="n3" target="n5"/>
<edge id="e6" source="n5" target="n4">
<data key="d1">1.1</data>
</edge>
</graph>
</graphml>