JointJS+ GEXF

format.GEXF

This plugin imports a graph represented as an XML string in the GEXF format and makes it a JointJS graph.

The plugin contains only one function joint.format.gexf.toCellsArray(xmlString, makeElement, makeLink), where:

argument	description
xmlString	an XML string representing a graph in GEXF format
makeElement(data)	a function that takes an object with `id` and `label` (and `width`, `height`, `x`, `y`, `z`, `color`, `shape` if present in the XML) properties and returns a JointJS element for this node.
makeLink(data)	a function that takes an object with `source` and `target` properties and returns a JointJS link for that edge.

Installation

Include joint.format.gexf.js file into your HTML:

<script src="joint.format.gexf.js"></script>

Usage

const xmlString = `<?xml version="1.0" encoding="UTF-8"?>
<gexf xmlns="http://www.gexf.net/1.2draft" xmlns:viz="http://www.gexf.net/1.1draft/viz" version="1.2">
    <graph mode="static" defaultedgetype="directed">
        <nodes>
            <node id="0" label="Hello">
                <viz:position x="15.0" y="40.0" z="0.0"/>
                <viz:size value="50" />
                <viz:color r="239" g="173" b="66" a="0.6"/>
            </node>
            <node id="1" label="World">
                <viz:position x="15.0" y="140.0" z="0.0"/>
                <viz:size value="50" />
                <viz:color r="239" g="173" b="66" a="0.6"/>
            </node>
        </nodes>
        <edges>
            <edge id="0" source="0" target="1" />
        </edges>
    </graph>
</gexf>`;

const cells = joint.format.gexf.toCellsArray(
    xmlString,
    function makeElement(data) {
        return new joint.shapes.standard.Rectangle({
           id: data.id,
           position: { x: data.x, y: data.y },
           size: { width: data.width, height: data.height },
           attrs: {
               label: { text: data.label },
               body: { fill: data.color }
            }
        });
    },
    function makeLink(data) {
        return new joint.shapes.standard.Link({
            source: { id: data.source },
            target: { id: data.target }
        });
    }
);

graph.resetCells(cells);