Question

我正在使用sigma.js来显示相当大的图形。当用户双击某个节点时，我希望相机放大所点击的节点 - 幸运的是，它开箱即用。但是，我还希望在双击节点时重绘图形：我希望将所选节点作为重心重新定位附近的项目，并且如果有任何节点与所选节点具有直接边缘，则在缩放后的可见屏幕之外，我希望缩短这些边缘，以便这些项目可见。

是否有指定两个要求中的任何一个的技术术语？（我对sigma和JS总体上比较新，并且不知道这些术语，但如果我知道如何用语言表达我想要做的事情，那将有助于我自己解决这个问题）。
我如何在sigma.js中实现这些要求？
是否有其他可视化框架更适合我的需求？

Answer 1

主页上的绑定事件回调教程似乎是个不错的开端：http://sigmajs.org/

我们需要做的第一件事是促进检索的方式节点的邻居。最好的方法是添加一个方法图模型。基本上，图模型提供了公共访问到节点和边数组，但它还维护一些更多的索引只能通过其方法访问，包括每个方法的索引每个节点的邻居。然后，我们只需要将函数绑定到某些函数事件，将首先修改节点和边的颜色，和然后刷新渲染。它已经完成了！

<!-- [...] -->
<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>
<!-- [...] -->

您基本上必须使用 bind 函数：）

sigma.js中的自定义行为

1 个答案: