sigma.js中的自定義行爲

我正在使用sigma.js來顯示一個相當大的圖。當用戶雙擊某個節點時，我希望相機放大點擊的節點 - 幸運的是，它可以開箱即用。但是，我還希望在雙擊節點時重繪圖形：我希望重新定位附近的項目以所選節點爲重心，並且如果有任何節點具有直接選定節點的邊緣在縮放後的可見屏幕外，我希望縮短這些邊緣以便這些項目可見。sigma.js中的自定義行爲

是否有指定的兩個要求之一的技術術語？（我對西格瑪和一般的JS都比較陌生，並且不瞭解這些術語，但是如果我知道如何描述我正在嘗試做的事情，這將幫助我自己弄清楚這一點）。
如何在sigma.js中滿足這些要求？
是否有另一種更適合我需求的可視化框架？

來源

2014-02-27 drewmoore

的綁定回調事件教程他們的網頁似乎是一個良好的開端：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> 
<!-- [...] -->

你基本上在綁定功能工作:)

來源

2014-05-26 09:28:45 Enoon

sigma.js中的自定義行爲

回答

相關問題