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）？

在每个节点上，您应该添加这些属性：

类型：'image'
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'};

干杯

将图标分配给Sigma.js中的节点

1 个答案: