JavaScript - Use Cytoscape Web Library to display network graph

由於工作上的需求，有利用到Cytoscape Web Library去畫node之間的關係呈現，方便研究者去

瞭解它們之間的關聯，所以在此就大概說明一下這套Library的功用。

官網上有提到，它是一套我們可以利用其JavaScript API並將資料組合成其自訂的資料格式，

如官網上提到的GraphML是其中一個，有點像XML格式的資料型態，最後它將透過一個

.swf檔案去畫出graph，而我們開發者只要去控制JavaScript Code即可。

JavaScript code配置如下：

var div_id = "cytoscapeweb";
   // initialization options
   var options = {
       swfPath: "./swf/CytoscapeWeb",
       flashInstallerPath: "./swf/playerProductInstall"
   };
   var visual_style = {
       global: {
           backgroundColor: "#FFFFFF"
       },
   nodes: {
       shape: "ELLIPSE",
       borderWidth: 2,
       borderColor: {
         defaultValue:"#157DEC"
       },
       size: { passthroughMapper: { attrName: "weight" } },
       color: { 
          defaultValue: "#FFFF00",//#fff999
          discreteMapper: {
             attrName: "nodecolor",
             entries: [
               { attrValue: "node1", value: "#008000" }
             ]
          }
       },
       selectionBorderColor:"#000000",
       hoverGlowOpacity:1,
       hoverBorderColor:"#000000",
       hoverGlowColor:"#B0E2FF",
       labelHorizontalAnchor: "center",
       labelFontColor:"#000000",
       labelGlowOpacity:1, 
       labelGlowColor:"#FCFCFC",
       labelVerticalAnchor:"top",
       labelFontWeight:"bold",
       labelFontSize:12,
       selectionColor:"#AB8EC6",
       opacity:1.0
   },
   edges: {
         width: 3,
         color: "#1E669B"
   }
 };
 vis = new org.cytoscapeweb.Visualization(div_id, options);
 // callback when Cytoscape Web has finished drawing
 vis.ready(function() {
 // add a listener for when nodes and edges are clicked
 });
 // draw options
 var draw_options = {
    // your data goes here
    network: xml,
    // hide pan zoom
    layout: 'ForceDirected',
    panZoomControlVisible: true, 
    visualStyle: visual_style
 };     
 vis.draw(draw_options);

請注意visual_style的部分，裡面會有您自訂的一些屬性名稱，如：

defaultValue: "#FFFF00",//#fff999
   discreteMapper: {
      attrName: "nodecolor",
      entries: [
        { attrValue: "node1", value: "#008000" }
      ]
   }

這段是定義color的部分，裡面的nodecolor表示當您帶入的GraphML的資料格式有定義如下

<data key='type3'>node1</data>，表示graph就會去帶出這個node顯示#008000的顏色

若是data 非node1則會顯示default預設的顏色來呈現。

而如上之network: xml之xml變數所帶的data，在這裡就是組織的GraphML形式的資料。

而我在這段js code內有獨自定義的一些屬性，剛剛有提到nodecolor了，表示node的顏色，還有

node size =>  size: { passthroughMapper: { attrName: "weight" } },

對映GraphML為<data key='weight'>20</data>

所以您在GraphML定義的東西，在JavaScript基本配置內如果沒有特別定義的話，就無法呈現

出您要的效果囉！

而GraphML定義如下：

var xml = '\
<graphml>\
   <key id="label" for="all" attr.name="label" attr.type="string"/>\
   <key id="nodecolor" for="node" attr.name="nodecolor" attr.type="string" />\
   <key id="weight" for="node" attr.name="weight" attr.type="double"/>\
   <graph edgedefault="directed">\
       <node id="1">\
          <data key="label">A</data>\
          <data key="nodecolor">node1</data>\
          <data key="weight">22.0</data>\
       </node>\
       <node id="2">\
          <data key="label">B</data>\
          <data key="nodecolor">defaultNode</data>\
          <data key="weight">10.5</data>\
       </node>\
       <node id="3">\
          <data key="label">C</data>\
          <data key="nodecolor">node1</data>\
          <data key="weight">31.0</data>\
       </node>\
       <edge source="1" target="2">\
          <data key="label">A to B</data>\
       </edge>\
       <edge source="1" target="3">\
          <data key="label">A to C</data>\
       </edge>\
    </graph>\
</graphml>\
';

這邊的GraphML data是定義在JavaScript內，您也可以在server端產生並且回傳給client端。

之後可以得到如下的畫面：

畫面內您可以去調整放大縮小、移動的效果，當然您也可以去撰寫node、edge的event處理。

基本上， Cytoscape Web在呈現graph還蠻容易的，我想在做研究上會很有用！