落园 » 网络图sigma.js框架初探|专注经济视角下的互联网

网络图sigma.js框架初探

前两天鼓捣新网站的时候挖掘的利器,很酷的JS框架。2013-12-09 14_02_29-sigma.js _ a lightweight JavaScript graph drawing library之所以我对他这么欢喜,主要是这货是支持Gephi的...然后还实现了interactive graph...真的是夫复何求呀!Gephi有个插件Sigmajs Exporter,安一下即可。

这里主要记录一下用这个框架初期遇到的一些困难...感觉本身的tutorial写的不是特别好...浪费了我一些时间google什么的。

Hello World

Sigma.js首页有个特别简单的hello world例子,但实际测试并没有那么容易搞定。

Here is the minimal code to create an instance:

主要的问题是完全不知道这东西应该怎么搞到一个静态的HTML网页中。Google了一下,终于找到一个本地可以成功run的例子

嗯,copy/paste之后终于看到Hello World了。大概看了一下,这段代码的核心就是那段JS,然后在body段建一个新的空div,id命名好就可以了。于是乎开始琢磨着把Sigma.js首页的banner扒过来。

清理了一番首页的代码,发现保留这一段就可以顺利实现banner的效果了。

看了一下几个核心的参数:

这里是调node颜色的。

N是node的数目,E是edge的数目。所以这个banner实际上是每次随机生成一个300个点600条边的random graph。

其中除了sigma.min.js之外,还需要保存一下prettify.js以及sigma.fisheye.js,其中后者实现了鼠标滑过的“鱼眼”效果。

至此,这段代码拷到我自己的首页里面就是最上面的banner了。当然我在CSS里面加了一下opacity属性实现半透明的效果(要不就喧宾夺主的感觉呃)。

Sigmajs Exporter:直接从Gephi导出interactive graph

依旧不死心,又研究了一下Sigmajs Exporter。这货不是一般的方便啊。

安装插件比较简单

  • Run Gephi.
  • Go to the menu Tools > Plugins > Available Plugins.
  • Click on Reload Catalog if the plugin you’re looking for is missing.
  • Select the plugin(s).
  • Click on Install, and follow the wizard.

然后重启Gephi,就会看到Export to sigma.js option on the File->Export menu。简单的写一些信息就直接导出了。这里缺少一点提示,默认会在自己选择的路径下新建network文件夹,里面存放各种导出的文件。直接双击index.html就好啦。比如我这里自己导出来的:http://cloudlychen.net/networkplaces/

2013-12-09 14_55_45-OII Network Visualisation Example嗯到这里我就满足啦。更多的参数可以直接在config.json里面改:

比如labelThreshold这个可以决定,当大于多少的时候显示label。

---------------------------------------

所以说,有了这个框架,可以玩的东西又多了很多呢。插件开发者blog这里http://blogs.oii.ox.ac.uk/vis/?page_id=115有更多的例子可以看看嗯,包括地图什么的。

Leave a Reply

Your email address will not be published. Required fields are marked *