设为首页 - 加入收藏 PHP编程网 - 黄冈站长网 (http://www.0713zz.com)-创业,推广,IT,移动互联,VR,5G,小程序,站长网!
热搜: 学习 vivo 华为 网站
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

在网页中绘制的Graphml javascript库

发布时间:2020-12-30 18:16 所属栏目:[资源] 来源:网络整理
导读:我有一个GraphML文件,我必须在网页上显示它,以及使用 JavaScript更改显示属性(如更改节点的颜色,边缘等). 可能吗? 如果有任何JavaScript库需要加载,解析并在网页上绘制GraphML,请告诉我. 解决方法 可以使用JavaScript XSLT API调用将GraphML作为输入并输

我有一个GraphML文件,我必须在网页上显示它,以及使用 JavaScript更改显示属性(如更改节点的颜色,边缘等).

可能吗?

如果有任何JavaScript库需要加载,解析并在网页上绘制GraphML,请告诉我.

解决方法

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

参考

> 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

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章
热点阅读
随机内容