concate string with data(id) in cytoscape

Question

I use cytoscape to present a structure with image in each node. The node content is appear, but the image is not. Is there a way to concate string path with the data(id) ?

        style:cytoscape.stylesheet()
        .selector('node')
        .css({
            "content":"data(id)",
            "background-image": 'url(http://puji.angin.com/cytoscape/data(id).jpg)',
            "background-fit": "cover"
        })
    });

My full code is here: http://jsbin.com/bacoju/1/watch

score 0 · Answer 1 · answered Jan 30 '15 at 21:31

Build an img attribute containing the url(xxx.jpg) def:

$(function () {
var cy = cytoscape({
    container: document.getElementById('cy'),
    ready:function(){
        console.log("App Ready");
    },
    elements:{
        nodes:[
            {data:{id:"sisca",img:"url(http://puji.angin.com/cytoscape/" + "sisca.jpg)"}},
            {data:{id:"jami", img:"url(http://puji.angin.com/cytoscape/" + "jami.jpg)"}},
            {data:{id:"ketut",img:"url(http://puji.angin.com/cytoscape/" + "ketut.jpg)"}}
        ],
        edges:[
            {data:{id:"e1",source:"sisca",target:"ketut"}},
            {data:{id:"e2",source:"sisca",target:"jami"}}
        ]
    },
    zoom:10,
    pan:{x:0,y:0},
    layout:{
        name:"breadthfirst"
    },
    style:cytoscape.stylesheet()
        .selector('node')
        .css({
            "content":"data(id)",
            "background-image": 'data(img)',
            "background-fit": "cover"
        })
    });

});

And then get the mapped data(img) as your css property !

score 0 · Answer 2 · answered Apr 27 '18 at 13:52

Instead of string, you can also pass a function accepting element and returning needed value:

cytoscape.stylesheet()
        .selector('node')
        .css({
            "content": "data(id)",
            "background-image": function (node) {
                return 'url(http://puji.angin.com/cytoscape/' + node.data(id) + '.jpg)';
            }
        })

Note: when you export such graph with cy.json(), properties defined as functions will be lost (exported as string 'fn' or something like that)

concate string with data(id) in cytoscape

2 Answers2