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(); 

私はこのコードを持っています。特定のノードに特定のアイコンを割り当てたい。

どのようにSigma.jsのノードにpngアイコンを割り当てることができますか。

たとえば、このスイッチノードのサブノードのサブネットおよびコンピュータアイコンのアイコンを切り替えます。

Answer 1

custom-node-renderer（https://github.com/jacomyal/sigma.js/blob/master/examples/custom-node-renderer.html）をご覧ください。あなたはそれらの属性を追加する必要があり、各ノードで

：

• タイプ： '画像'
• URL：あなたの画像のURL

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'};

乾杯