將圖標分配給Sigma.js中的節點

Question

subsG = {}; 
    subNodes = []; 
    subEdges = []; 
    graphs = []; 
    level = 0; 
    limit = 1; 
    //map for searching nodes based on label 
    searchMap = {}; 
    //Create the higher level subnet graph 
    for(var key in data){ 
     if(data.hasOwnProperty(key)){ 
      node = {"color":"blue", "label":"Subnet" + key, "x": Math.random(), "y": Math.random(), "id": "n"+key, "size": 10}; 
      node.type = 'star'; 
      subNodes.push(node); 
     } 
    } 
    //Create subnets graph in sigma format 
    subsG['nodes'] = subNodes; 
    subsG['edges'] = subEdges; 
    prevGraph = {}; 
    //console.log(g); 

    s = new sigma({ 
     graph: subsG, 
     container: 'graph-container', 
     settings: { 
      drawEdges: true, 
      doubleClickEnabled: false 
     } 
    }); 
    // Start the ForceAtlas2 algorithm: 
    function start(){ 
     s.camera.goTo({ 
      x: 0, 
      y: 0, 
      angle: 0, 
      ratio: 1.5 
     }); 
     var i, 
      nodes = s.graph.nodes(), 
      len = nodes.length; 

     for (i = 0; i < len; i++) { 
      nodes[i].x = Math.cos(Math.PI * 2 * i/len); 
      nodes[i].y = Math.sin(Math.PI * 2 * i/len); 
     } 
     s.startForceAtlas2({worker: true, barnesHutOptimize: false, autostop: true}); 
     setTimeout(function(){s.stopForceAtlas2();},2000); 
    }; 

    start(); 

我有這段代碼。我想爲特定的節點分配特定的圖標。

如何將png圖標分配給Sigma.js中的節點。

例如;此交換機節點的子節點的計算機圖標和子網切換圖標。

Answer 1

你看看custom-node-renderer（https://github.com/jacomyal/sigma.js/blob/master/examples/custom-node-renderer.html）嗎？

在每個節點上，你應該添加這些屬性：

• 類型： '形象'
• 網址：你的形象的網址

node = {"color":"blue", "label":"Subnet" + key, "x": Math.random(), "y": Math.random(), "id": "n"+key, "size": 10, type:'image', url:'https://cdn0.iconfinder.com/data/icons/30-hardware-line-icons/64/Server-128.png'};

乾杯