javascript - sigma.js 中的自定义行为

Question

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

• 是否有针对指定的两个要求中的任何一个的技术术语？ (我对 sigma 和 JS 总体来说比较陌生，并且不知道这些术语，但如果我知道如何用语言表达我正在尝试做的事情，这将帮助我自己弄清楚这一点)。

• 我如何在 sigma.js 中满足这些要求？

• 还有其他更适合我的需求的可视化框架吗？

Answer 1

主页上的将回调绑定(bind)到事件教程似乎是一个好的开始:http://sigmajs.org/

The first thing we need to do is to facilitate the way to retrieve the neighbors of a node. And the best way to do that is to add a method to the graph model. Basically, the graph model provides a public access to the nodes and edges arrays, but it also maintains some more indexes accessible only from its methods, including the index of every neighbors for each node. Then, we just need to bind functions to some events, that will first modify the colors of the nodes and edges, and then refresh the rendering. And it's done!

<!-- [...] -->
<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函数:)