Geek Answers Handbook

Javascript graphml library for drawing on web page

I have a GraphML file, I have to display it on a web page, and also change the display properties using JavaScript (for example, change the node color, edges, etc.).

Is it possible?

Please let me know if there is any JavaScript library for loading, parsing and drawing GraphML on a web page.

+7
source share
2 answers

An XSLT stylesheet that accepts GraphML as SVG input and output can be invoked using the JavaScript XSLT API. For example:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/2000/svg"> <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/> <xsl:template match="graph"> <!-- when finding a 'graph' element, create the 'svg' root and its 'defs' section --> <svg> <defs> <marker id="arrow" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="10" markerHeight="10" orient="auto"> <path fill="black" d="M0 0 10 5 0 10z"/> </marker> </defs> <!-- for each 'node' create a 'g' element with its contents --> <xsl:for-each select="node"> <g> <rect width="100" height="100" fill="silver"/> <text style="font-size:24;font-weight:bold"> <xsl:value-of select="@id"/> </text> </g> </xsl:for-each> <!-- for each 'edge' create a 'line' with the arrow if it is a 'directed' edge --> <xsl:for-each select="edge"> <line> <xsl:if test="not(@directed='false')"> <xsl:attribute name="style">marker-end:url(#arrow)</xsl:attribute> </xsl:if> </line> </xsl:for-each> </svg> </xsl:template> </xsl:stylesheet>

References

+7
source

A serious contender for this task (at least in a commercial context) will be yFiles for HTML Javascript Graph Drawing Library :

  • its main graph exchange format is GraphML (see this live demo of GraphML )
  • if your GraphML uses a specific “dialect” (GraphML as such does not have a standard that describes how to specify visualization data, such as coordinates, colors and even labels), the GraphML parsing process can be easily configured to analyze more GraphML extensions,
  • If GraphML does not contain a coordinate, but simply a graph structure, you can use layout algorithms to automatically calculate a beautiful layout dynamically before the graph is displayed.
  • the library has full editing capabilities, so you can change the schedule both programmatically and interactively using mouse gestures and touch.

Full disclosure: I work for a company that creates this library, but I do not represent my employer on SO

+4
source

More articles:


All Articles