sigma.js下载 - 一款很棒的图形绘制js库

8914 2016-10-19 JavaScript MIT 官方网站

一款很棒的图形绘制js库,Sigma提供了许多内置功能,如Canvas和WebGL渲染器或鼠标和触摸支持。Sigma是一个高度可扩展的渲染引擎,使用API可以修改数据、相机、刷新渲染、监听事件。

sigma.js下载

build.zip(v1.2.0) 下载

v1.2.1.zip(v1.2.1) 下载

v1.2.0.zip(v1.2.0) 下载

release-v1.1.0.zip(v1.1.0) 下载

sigma.js趋势

sigma.js截图

sigma.js截图 sigma.js截图

sigma.js介绍

使用方法

//数据格式
{
  "nodes": [
    {
      "id": "n0",
      "label": "A node",
      "x": 0,
      "y": 0,
      "size": 3
    },
    {
      "id": "n1",
      "label": "Another node",
      "x": 3,
      "y": 1,
      "size": 2
    },
    {
      "id": "n2",
      "label": "And a last one",
      "x": 1,
      "y": 3,
      "size": 1
    }
  ],
  "edges": [
    {
      "id": "e0",
      "source": "n0",
      "target": "n1"
    },
    {
      "id": "e1",
      "source": "n1",
      "target": "n2"
    },
    {
      "id": "e2",
      "source": "n2",
      "target": "n0"
    }
  ]
}

html代码

<html>
<head>
<style type="text/css">
  #container {
    max-width: 400px;
    height: 400px;
    margin: auto;
  }
</style>
</head>
<body>
<div id="container"></div>
<script src="sigma.min.js"></script>
<script src="sigma.parsers.json.min.js"></script>
<script>
  sigma.parsers.json('data.json', {
    container: 'container',
    settings: {
      defaultNodeColor: '#ec5148'
    }
  });
</script>
</body>
</html>

最终效果