Question

我有一个Sigma.Js 1.0.0的实例，在我的Canvas元素中渲染图形。（代码如下，但您只需滚动到Step 2 of Tutorial on the main sigmajs.org page。

从该代码中可以看出，单击节点时，会发生ClickNode事件，然后对图表应用过滤，仅显示单击的节点及其邻域，并使其他节点变暗。这很清楚。

但是，我如何从外面做出完全相同的事情呢？假设我已经渲染了图表，并且旁边有一个Tag Cloud。我希望当我点击#hashtag时，只有该节点显示在图表中，其余节点变暗。我该怎么做？

谢谢！

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

Answer 1

我希望这可以回答你的问题。

你有一个充满单词的tagcloud，当你单击一个单词时，你想要在你的sigma实例上触发你需要节点id的邻居方法。简而言之，您需要在单击#hashtag时调用的函数与sigma实例化的范围相同。

s= new sigma({
    settings: {...}
})
//more code instantiating methods etc
//let's assume your tags are in elements with class='tagword' and have the hashtag stored in a 'name' attribute
$('.tagword').on('click', function(){
    var name = this.attr('name');
    s.graph.nodes().forEach(function(n){
        if (n.label == name){
            //use the node to trigger an event in sigma
            //i.e. s.graph.neighbors(n.id);
        };
    };
};

从外部事件过滤Sigma.Js图

1 个答案: