设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 科技、建站、经验、云计算、5G、大数据,站长网!
热搜: 创业者 手机 数据
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

在网页中绘制的Graphml javascript库

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

我有一个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

(编辑:ASP站长网)

    网友评论
    推荐文章
      热点阅读