Graphml JavaScript库用于在网页中绘制图形。

Question

Graphml JavaScript库用于在网页中绘制图形。

javascriptvisualizationstylinggraphml

9

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

这是否可行？

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

- sokid

GraphMl视图器用于网络可视化示例。 - Abhi

2个回答

5

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

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

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

- Sebastian

有没有开源的替代方案？ - Ryan Chou

2

这是一个非常昂贵的产品，适用于业余爱好或研究项目。据我所知，在开源项目中使用它没有任何折扣。 - Roland Tepp

1

@RolandTepp，你的评论完全错误。首先，这不是OP的要求。但更重要的是，有学术许可证，价格大幅折扣，由于疫情的原因，现在甚至对许多学术项目免费：https://yworks.com/fightcorona - Sebastian

1

学术许可证是否涵盖个人爱好和未来可能的开源使用？ - Roland Tepp

@RolandTepp 这取决于情况。也许是，也许不是。我不是律师，SO不是讨论这个问题的正确场所:-) - 请联系yWorks的销售团队。 - Sebastian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul Sweatte · Accepted Answer

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

参考文献