项目实训第一周（2）

使用sigmajs绘制出第一张图片

生成一个随机图并存储在“graph”变量中，然后直接用该图实例化sigma。

实现这个demo的思路就是

第一步 - 创建node,你需要创建几个节点.

第二步 - 创建edge(线),把这个节点用线给连接起来.

节点就是一个数组,线也是一个数组,里面的对象来描述各个节点和线的信息

第三步 - 新建一个sigma实例s，在'graph-container'区域绘制出来

<!-- START SIGMA IMPORTS -->
<script src="../build/sigma.min.js"></script>
<!-- END SIGMA IMPORTS -->
<div id="container">
  <style>
    #graph-container {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
    }
  </style>
  <div id="graph-container"></div>
</div>
<script>
var i,
    s,
    N = 100,
    E = 500,
    g = {
      nodes: [],
      edges: []
    };

// Generate a random graph:
for (i = 0; i < N; i++)
  g.nodes.push({
    id: 'n' + i,
    label: 'Node ' + i,
    x: Math.random(),
    y: Math.random(),
    size: Math.random(),
    color: '#666'
  });

for (i = 0; i < E; i++)
  g.edges.push({
    id: 'e' + i,
    source: 'n' + (Math.random() * N | 0),
    target: 'n' + (Math.random() * N | 0),
    size: Math.random(),
    color: '#ccc'
  });

// Instantiate sigma:
s = new sigma({
  graph: g,
  container: 'graph-container'
});
</script>

得到的随机图片如下：