在网页中绘制Graphml的JavaScript库

Question

我有一个GraphML文件，我必须在网页上显示它，并使用JavaScript更改显示属性（如更改节点的颜色，边缘等）。

可能吗？

请让我知道，如果有任何JavaScript库加载，解析并在网页上绘制GraphML。

Answer 1

将GraphML作为输入并输出SVG的XSLT样式表可以使用JavaScript XSLT API调用。例如：

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

参考

• 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

这项任务（在商业方面至少）的有力竞争者将是yFiles for HTML Javascript Graph Drawing Library：

• 其主要图形交换格式是GraphML（见this live GraphML demo）
• 如果您GraphML使用特定“方言”（GraphML本身没有描述如何指定可视化细节的标准，如坐标，颜色，甚至标签），GraphML解析过程可以轻松定制以解析更多的GraphML扩展。
• 如果GraphML不包含坐标，但只是图的结构，您可以使用布局算法在图形显示之前动态自动计算出一个漂亮的布局
• 该库具有完整的编辑功能，因此您可以修改图形以编程方式，以及交互方式使用鼠标和触摸手势

全面披露：我为创建库公司工作，但我不表示SO