使用Sigma.js库在Web页面画网络图

#Sigma
Sigma是用来画图(Graph)的开源JavaScript库（sigma-github源码，sigma历史版本），用它可以很方便的在Web页面中画网络图。

自己Build最新版本

由于是开源的，不时有新的代码更新，这些更新一般是bug修复，但作者的发布周期较长，所以需要自己build导出sigma库，以保证不会出现各种奇奇怪怪的bug。sigma-github源码首页已经说了怎么build，步骤大致如下：

  • 下载sigma源码（不会用git的可以直接下载zip文件并解压出sigma.js文件夹）:

    1
    $ git clone git@github.com:jacomyal/sigma.js.git

  • 安装node.js;

  • 安装gjslint，步骤大致如下：
    1. 安装python，最好下2.7版本;
    2. 安装easy_install(windows下直接下载并运行ez_setup.py，最后添加python安装目录下的scripts路径到系统Path环境变量);
    3. 运行如下命令: 
      1
      $ easy_install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz  
```  
* 在sigma.js路径下执行如下命令进行build，最终的js文件会保存在`build`文件夹下：

$ npm install
$ npm run build

1
`build`文件夹最终包含一个`plugins`文件夹和两个js文件(`sigma.min.js`和`sigma.require.js`文件)，有用的只是`plugins`文件夹和`sigma.min.js`文件。

### 运行样例
源码包下的`examples`文件夹包含了很多例子，大部分例子直接点开就可以在浏览器中查看。少数涉及__使用脚本读取文件__的例子需要__运行本地服务器__(使用的是node.js平台框架，需要安装[node.js])，在`sigma.js`路径下执行如下命令（第一条命令如果运行过了就不必再运行），最后点开`http://localhost:8000/examples/` 即可：

$ npm install
$ npm start
```

API文档

源码总体分4部分，分别为graph, renderers, settings和controller。graph是图的数据结构，定义了图的基本接口；renderers是渲染器，目前支持webgl, canvas和svg三种；settings是对图的显示设定，如节点大小、颜色、边的属性；controller将前面三者关联起来提供接口。更多详细内容请看官方文档：

可处理的数据格式

  • gexf格式：实际为xml文件。该格式源于Gephi，它是开源的网络可视化与分析软件，以插件形式提供各式各样的基于图的算法；
  • json格式：该格式用于Web客户端与服务器端的数据交互。

Graph, Node和Edge数据结构

官方文档中没有包含对数据结构的介绍，以下源码中有关数据结构的代码（从plugins/sigma.parsers.gexf/gexf.parser.js中找的，json对应部分也有相似的内容）：

  • Graph数据结构：
    • version: string
    • mode: string
    • defaultEdgeType: string
    • meta: object {lastmodifieddate , …}
    • model: object {node, edge}
    • nodes: arry
    • edges: arry
  • Node数据结构：
    • id: string
    • label: string
    • viz: object {color, position, size, shape}
    • attributes: map
  • Edge数据结构：
    • id: string
    • type: string
    • label: string
    • source: string
    • target: string
    • weight: number
    • viz: object {color, shape, thickness}
    • atrributes: map

评论