在 cytoscape 中使用数据（id）连接字符串答案

【问题标题】：concate string with data(id) in cytoscape在 cytoscape 中使用数据（id）连接字符串
【发布时间】：2015-01-22 02:03:16
【问题描述】：

我使用 cytoscape 在每个节点中呈现带有图像的结构。出现节点内容，但不显示图像。有没有办法将字符串路径与 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"
        })
    });

我的完整代码在这里： http://jsbin.com/bacoju/1/watch

【问题讨论】：

标签： string stylesheet concat cytoscape

【解决方案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 属性！

【讨论】：

【解决方案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' 或类似的东西）

【讨论】：