string - 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

Answer 1

构建一个包含 url(xxx.jpg) def 的 img 属性：

$(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"
        })
    });

});

然后将映射数据（img）作为您的 css 属性！

Answer 2

除了字符串，您还可以传递一个接受元素并返回所需值的函数：

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

注意：当您使用 导出此类图形时cy.json()，定义为函数的属性将丢失（导出为字符串 'fn' 或类似的东西）