Graphml libreria javascript per disegnare nella pagina web

Question

Ho un file GraphML, devo visualizzarlo su una pagina Web e modificare le proprietà di visualizzazione utilizzando JavaScript (come cambiare il colore del nodo, bordo ecc.).

È possibile?

Per favore fatemi sapere, se c'è qualche libreria JavaScript da caricare, analizzare e disegnare GraphML su una pagina web.

Answer 1

Un foglio di stile XSLT che accetta GraphML come input e output SVG può essere chiamato utilizzando l'API XSLT JavaScript. Ad esempio:

<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> 

Riferimenti

• GraphML to SVG using XSLT
• Mozilla JavaScript XSLTProcessor API
• Microsoft JavaScript MSXML transform API
• Using XSLTProcessor programatically in IE to minimize client-server bandwith
• Using AIR for XSLT Processing

Answer 2

Un serio contendente per questo compito (almeno in un contesto commerciale) sarebbe il yFiles for HTML Javascript Graph Drawing Library:

• suo formato principale di scambio grafico è graphml (vedi this live GraphML demo)
• se il graphml utilizza una specifica "dialetto" (GraphML come tale non ha uno standard che descrive come specificare dettagli di visualizzazione come coordinate, colori, persino etichette), il processo di analisi GraphML può essere personalizzato facilmente per analizzare più estensioni GraphML.
• se GraphML non contiene coordinate, ma solo la struttura del grafico, è possibile utilizzare gli algoritmi di layout per calcolare automaticamente un layout piacevole dinamicamente prima che venga visualizzato il grafico
• la libreria è dotata di funzionalità di modifica complete, quindi è possibile modificare il grafico sia a livello di codice, così come in modo interattivo utilizzando il mouse e touch

Full disclosure: io lavoro per l'azienda che crea quella biblioteca, ma io non rappresento il mio datore di lavoro su SO