前两天鼓捣新网站的时候挖掘的利器,很酷的JS框架。之所以我对他这么欢喜,主要是这货是支持Gephi的...然后还实现了interactive graph...真的是夫复何求呀!Gephi有个插件Sigmajs Exporter,安一下即可。
这里主要记录一下用这个框架初期遇到的一些困难...感觉本身的tutorial写的不是特别好...浪费了我一些时间google什么的。
Hello World
Sigma.js首页有个特别简单的hello world例子,但实际测试并没有那么容易搞定。
Here is the minimal code to create an instance:
var sigRoot = document.getElementById('sig'); var sigInst = sigma.init(sigRoot); sigInst.addNode('hello',{ label: 'Hello', color: '#ff0000' }).addNode('world',{ label: 'World !', color: '#00ff00' }).addEdge('hello_world','hello','world').draw();
主要的问题是完全不知道这东西应该怎么搞到一个静态的HTML网页中。Google了一下,终于找到一个本地可以成功run的例子。
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="http://sigmajs.org/js/sigma.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var sigRoot = document.getElementById('sig'); var sigInst = sigma.init(sigRoot).drawingProperties({ defaultLabelColor: '#ccc', font: 'Arial', edgeColor: 'source', defaultEdgeType: 'curve' }).graphProperties({ minNodeSize: 1, maxNodeSize: 10 }); sigInst.addNode('hello',{ label: 'Hello', color: '#ff0000', x: 1 }).addNode('world',{ label: 'World !', color: '#00ff00', x: 2 }).addEdge('hello_world','hello','world').draw(); }); </script> <style type="text/css"> /* sigma.js context : */ .sigma { margin-left:auto; margin-right:auto; position: relative; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background: #222; width: 80%; height: 80%; top: 0; left: 0; } </style> </head> <body> <div class="sigma" id="sig"></div> </body> </html>
嗯,copy/paste之后终于看到Hello World了。大概看了一下,这段代码的核心就是那段JS,然后在body段建一个新的空div,id命名好就可以了。于是乎开始琢磨着把Sigma.js首页的banner扒过来。
清理了一番首页的代码,发现保留这一段就可以顺利实现banner的效果了。
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>sigma.js | a lightweight JavaScript graph drawing library</title> <meta name="description" content=""> <meta name="author" content="Alexis Jacomy"> <meta name="robots" content="all" /> <meta name="viewport" content="width=device-width"> <script src="js/prettify.js"></script> <script src="js/sigma.min.js"></script> </head> <body onload="prettyPrint();"> <div class="container"> <div class="hero-unit"> <div class="sigma-parent sigma-expand"> <div class="sigma-expand" id="sigma-1"></div> </div> <div class="intro"> <h1 class="sigma-font">sigma.js</h1> <p>Web network visualization made easy</p> </div> <div class="sigma-expand" id="mouselayer-sigma-1"></div> </div> <style type="text/css"> .social-container { overflow: hidden; margin: 0 auto; } /* Custom page style : */ .hero-unit { position: relative; color: #fff; } .hero-unit h1 { letter-spacing: 0; color: #fff; } .hero-unit h1, .hero-unit p { text-shadow: 1px 1px 4px #000; } .hero-unit div.intro { position: relative; } .centered { text-align: center; } #introduction, #introduction * { font-size: 16px; } /* sigma.js context : */ .sigma-parent { position: relative; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background: #222; } .sigma-expand { position: absolute; width: 100%; height: 100%; top: 0; left: 0; height:500px } </style> <script src="js/sigma.fisheye.js"></script> <script type="text/javascript"> function init() { function getRandomColor(a, b) { var r = Math.random(); return 'rgb('+ ((a.r+(b.r-a.r)*r)|0).toString() + ','+ ((a.g+(b.g-a.g)*r)|0).toString() + ','+ ((a.b+(b.b-a.b)*r)|0).toString() + ')'; }; var colorFrom = { r: 32, g: 79, b: 25 }; var colorTo = { r: 180, g: 255, b: 158 }; /** * sigma.js instance 1 (banner) : */ s1 = sigma.init(document.getElementById('sigma-1')).configProperties({ drawHoverNodes: false }).drawingProperties({ labelThreshold: 10000, defaultEdgeType: 'curve' }).mouseProperties({ mouseEnabled: false }).graphProperties({ scalingMode: 'outside' }); var i, N = 300, E = 600; for(i=0;i<N;i++){ s1.addNode(i,{ 'x': Math.random(), 'y': Math.random(), 'size': 0.5+5*Math.random(), 'color': getRandomColor(colorFrom,colorTo) }); } for(i=0;i<E;i++){ s1.addEdge(i,Math.random()*N|0,Math.random()*N|0); } s1.draw(); var newParent = document.getElementById('mouselayer-sigma-1'); var mouseLayer = document.getElementById('sigma_mouse_1'); newParent.appendChild(mouseLayer); mouseLayer.addEventListener('mouseover', function() { s1.activateFishEye(); }, true); mouseLayer.addEventListener('mouseout', function() { s1.desactivateFishEye().draw(2,2,2); }, true); /** * Resize every instances on window resizing, and * some divs : */ function resize(event){ for(var key in sigma.instances) { sigma.instances[key].resize(); } }; window.onresize = resize; resize(); } /** * Wait for the DOM to be ready to start : */ if (document.addEventListener) { document.addEventListener("DOMContentLoaded", init, false); } else { window.onload = init; } </script> </div> </body> </html>
看了一下几个核心的参数:
var colorFrom = { r: 32, g: 79, b: 25 }; var colorTo = { r: 180, g: 255, b: 158 };
这里是调node颜色的。
var i, N = 300, E = 600;
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/
嗯到这里我就满足啦。更多的参数可以直接在config.json里面改:
{ "type": "network", "version": "1.0", "data": "data.json", "logo": { "text": "liyun", "file": "", "link": "" }, "text": { "title": "place", "more": "place", "intro": "place" }, "legend": { "edgeLabel": "path", "colorLabel": "color", "nodeLabel": "city" }, "features": { "search": true, "groupSelectorAttribute": false, "hoverBehavior": "dim" }, "informationPanel": { "imageAttribute": "Label", "groupByEdgeDirection": false }, "sigma": { "graphProperties": { "minEdgeSize": 0.2, "maxNodeSize": 7, "maxEdgeSize": 0.5, "minNodeSize": 1 }, "drawingProperties": { "labelThreshold": 1, "hoverFontStyle": "bold", "defaultEdgeType": "curve", "defaultLabelColor": "#000", "defaultLabelHoverColor": "#fff", "defaultLabelSize": 14, "activeFontStyle": "bold", "fontStyle": "bold", "defaultHoverLabelBGColor": "#002147", "defaultLabelBGColor": "#ddd" }, "mouseProperties": { "minRatio": 0.75, "maxRatio": 20 } } }
比如labelThreshold这个可以决定,当大于多少的时候显示label。
---------------------------------------
所以说,有了这个框架,可以玩的东西又多了很多呢。插件开发者blog这里http://blogs.oii.ox.ac.uk/vis/?page_id=115有更多的例子可以看看嗯,包括地图什么的。