Question

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

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'或类似的东西）

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

2 个答案: