Appearance

  2. Examples

GraphML ​

importparsers

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>