sigma.js框架初探

最新推荐文章于 2022-07-25 17:25:51 发布

为什么我是菜鸟

最新推荐文章于 2022-07-25 17:25:51 发布

阅读量6.2k

点赞数 2

分类专栏： JavaScript 文章标签：框架 sigmajs

本文链接：https://blog.csdn.net/hubinqiang/article/details/51527515

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近项目开发需要用到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>
<!-- [...] -->