javascript - Webページに描画するGraphml JavaScriptライブラリ

Question

私はGraphMLファイルを持っています.Webページに表示するだけでなく、JavaScriptを使用して表示プロパティを変更する必要があります(ノード、エッジなどの色の変更など)。

出来ますか？

Web ページで GraphML を読み込み、解析し、描画するための JavaScript ライブラリがあれば教えてください。

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>

参考文献

• XSLT を使用した GraphML から SVG への変換
• Mozilla JavaScript XSLTProcessor API
• Microsoft JavaScript MSXML 変換 API
• XSLTProcessor を IE でプログラム的に使用して、クライアント サーバーの帯域幅を最小化する
• XSLT 処理に AIR を使用する

Answer 2

このタスクの真剣な候補は (少なくとも商業的な文脈では) HTML Javascript Graph Drawing Library の yFilesでしょう:

• その主なグラフ交換形式は GraphML です (このライブ GraphML デモを参照してください) 。
• GraphML が特定の「方言」を使用している場合 (GraphML 自体には、座標、色、さらにはラベルなどの視覚化の詳細を指定する方法を説明する標準がありません)、GraphML 解析プロセスを簡単にカスタマイズして、より多くの GraphML 拡張を解析できます。
• GraphML に座標が含まれておらず、グラフの構造のみが含まれている場合、レイアウト アルゴリズムを使用して、グラフが表示される前に適切なレイアウトを動的に自動的に計算できます。
• ライブラリには完全な編集機能が備わっているため、プログラムによって、またマウスやタッチ ジェスチャを使用してインタラクティブにグラフを変更できます。

完全な開示: 私はそのライブラリを作成する会社で働いていますが、SO で雇用主を代表していません。