Cytoscape.js - 自定义节点

问题描述：

我明白，可以创建自定义节点样式作为SVG图像，然后将其设置为节点的背景图像，但由于某种原因，它不适用于我。这里是我的代码：Cytoscape.js - 自定义节点

var cytoscapeStyle = [ // the stylesheet for the graph  
    { 
    selector: 'node', 
    style: { 
     'background-color': 'white', 
     'border-width': '6px', 
     'label': 'data(id)', 
     'background-image': 'node.svg', //doesn't work for some reason. Works when I use a png (e.g. node.png) 
     'shape': 'roundrectangle', 
     'width': '200px', 
     'height': '90px' 
    } 
    }, 

    { 
    "selector": "node:selected", 
    "style": { 
     "border-width": "6px", 
     "border-color": "#AAD8FF", 
     "border-opacity": "0.5", 
     "background-color": "#77828C", 
     "text-outline-color": "#77828C" 
    } 
    }, 

    { 
    selector: 'edge', 
    style: { 
     'width': 3, 
     'line-color': '#ccc', 
     'target-arrow-color': '#ccc', 
     'target-arrow-shape': 'triangle', 
     'label': 'data(id)' 
    } 
    } 
];

感谢提前:)

答

如果您的SVG未加载，则SVG图像无效或不指定尺寸。

答

把SVG（数据URI）在您的数据{..}，并设置背景图像数据（SVG）

stylestuff

{ 
selector: 'node', 
style: { 
    'background-image': 'data(svg)' 
}

nodestuff

cy.add([ 
    { 
    group: "nodes", 
    data: { id: "somenode", 
      svg: <image> //eg. "data:image/svg+xml;base64,<data>" 
         //  or http://some.image.xyz 

    }])

Cytoscape.js - 自定义节点

相关推荐