分享一个超酷的开源html5 canvas互动网络图形成效javascript类库 - sigma.js

分享一个超酷的开源html5 canvas互动网络图形效果javascript类库 - sigma.js

在线演示

今天分享一个超酷的开源轻量级javascript图形网络类库 -?sigma.js，这个类库基于HTML5画布实现。能够非常好的生成静态或者动态的互动网络图形。

这个类库特别为以下设计：

• 使用图形软件输出生成互动的静态图形，例如，Gephi
• 快速的生成动态图形

  这个类库是一个独立的不依赖于第三方javascript的图形类库。开发人员可以自己开发插件来扩展功能，同时也支持类似jQuery的链式操作。支持主流的浏览器。

  ?

  

  主要特性

  • 使用简单
  • 高度自定义
  • 不依赖类库
  • 支持使用和开发插件?
  • 简单易于访问的API
  • 流动绘图管理，可以插入帧
  • 类似jQuery的链式操作

    如何使用

    快速创建一个实例：

    view plaincopy to clipboardprint?

    1. var?sigRoot?=?document.getElementById('sig');??
    2. var?sigInst?=?sigma.init(sigRoot);??
    3. sigInst.addNode('hello',{??
    4. ??label:?'Hello',??
    5. ??color:?'#ff0000'??
    6. }).addNode('world',{??
    7. ??label:?'World?!',??
    8. ??color:?'#00ff00'??
    9. }).addEdge('hello_world','hello','world').draw();??

    支持高度的定制：

    view plaincopy to clipboardprint?

    1. sigInst.drawingProperties({??
    2. ??defaultLabelColor:?'#ccc',??
    3. ??font:?'Arial',??
    4. ??edgeColor:?'source',??
    5. ??defaultEdgeType:?'curve'??
    6. }).graphProperties({??
    7. ??minNodeSize:?1,??
    8. ??maxNodeSize:?10??
    9. });???

    希望大家能够喜欢！