javascript - 用于在网页中绘制的 Graphml javascript 库

Question

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

可能吗？

如果有任何 JavaScript 库可以在网页上加载、解析和绘制 GraphML，请告诉我。

Answer 1

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

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

参考

• 使用 XSLT 将 GraphML 转换为 SVG
• Mozilla JavaScript XSLTProcessor API
• Microsoft JavaScript MSXML 转换 API
• 在 IE 中以编程方式使用 XSLTProcessor 来最小化客户端-服务器带宽
• 使用 AIR 进行 XSLT 处理

Answer 2

这项任务的重要竞争者（至少在商业环境中）将是yFiles for HTML Javascript Graph Drawing Library：

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

全面披露：我为创建该库的公司工作，但我不代表我的雇主在 SO