sigma.js框架初探

来源：互联网发布：淘宝有信用卡套现的吗编辑：程序博客网时间：2024/06/05 10:29

最近项目开发需要用到sigma.js，网络上的中文资料很少，所以写这样一篇文章记录自己学习的过程。
资料来自官网。

快速开始

DATA

{  "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>

记得要在服务器下查看，直接打开html文件无效，显示
XMLHttpRequest cannot load file:///D:/…/sigmajs/build/data.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.sigma.parsers.json @ sigma.parsers.json.min.js:1
index.html:1 Uncaught SyntaxError: Unexpected end of inputsigma.parsers.json @ sigma.parsers.json.min.js:1

教程

加载显示图形

我们有id为sigma-container的容器，以显示我们的图形。此元素的宽度和高度可以随意设定，sigma会适应它本身加进去的元素。此外，我们必须导入sigma，添加script标签。
因为sigma提供了一个专门用于加载和分析GEXF图形文件的插件。因此，我们所要做的就是加载插件，并使用它。

<!-- [...] --><div id="sigma-container"></div><script src="path/to/sigma.js"></script><script src="path/to/sigma.parsers.gexf.min.js"></script><script>  sigma.parsers.gexf(    'path/to/les-miserables.gexf',    { // Here is the ID of the DOM element that      // will contain the graph:      container: 'sigma-container'    },    function(s) {      // This function will be executed when the      // graph is displayed, with "s" the related      // sigma instance.    }  );</script><!-- [...] -->

回调事件

我们需要做的第一件事是便于检索邻居节点的方式。而要做到这一点的最好办法是添加到graph模型。
graph模型提供给节点和边阵列一个公共访问，但它也只维护它的方法，其中包括每邻居的每个节点的索引访问更多的索引。
然后，我们只需要绑定功能，事件，这将首先修改节点和边缘的颜色，然后刷新渲染。

<!-- [...] --><div id="sigma-container"></div><script src="path/to/sigma.js"></script><script src="path/to/sigma.parsers.min.gexf.js"></script><script>  // Add a method to the graph model that returns an  // object with every neighbors of a node inside:  sigma.classes.graph.addMethod('neighbors', function(nodeId) {    var k,        neighbors = {},        index = this.allNeighborsIndex[nodeId] || {};    for (k in index)      neighbors[k] = this.nodesIndex[k];    return neighbors;  });  sigma.parsers.gexf(    'path/to/les-miserables.gexf',    {      container: 'sigma-container'    },    function(s) {      // We first need to save the original colors of our      // nodes and edges, like this:      s.graph.nodes().forEach(function(n) {        n.originalColor = n.color;      });      s.graph.edges().forEach(function(e) {        e.originalColor = e.color;      });      // When a node is clicked, we check for each node      // if it is a neighbor of the clicked one. If not,      // we set its color as grey, and else, it takes its      // original color.      // We do the same for the edges, and we only keep      // edges that have both extremities colored.      s.bind('clickNode', function(e) {        var nodeId = e.data.node.id,            toKeep = s.graph.neighbors(nodeId);        toKeep[nodeId] = e.data.node;        s.graph.nodes().forEach(function(n) {          if (toKeep[n.id])            n.color = n.originalColor;          else            n.color = '#eee';        });        s.graph.edges().forEach(function(e) {          if (toKeep[e.source] && toKeep[e.target])            e.color = e.originalColor;          else            e.color = '#eee';        });        // Since the data has been modified, we need to        // call the refresh method to make the colors        // update effective.        s.refresh();      });      // When the stage is clicked, we just color each      // node and edge with its original color.      s.bind('clickStage', function(e) {        s.graph.nodes().forEach(function(n) {          n.color = n.originalColor;        });        s.graph.edges().forEach(function(e) {          e.color = e.originalColor;        });        // Same as in the previous event:        s.refresh();      });    }  );</script><!-- [...] -->

1 0