將圖標分配給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 ）？

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

• 類型：'圖像'
• 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'};

干杯