CODEWITHSUNDEEP
javascriptsvgcytoscape.js
Aviran Katz
Aviran Katz

Reputation: 761

Cytoscape.js - custom nodes

I understood that it's possible to create custom node styles as SVG images and then set it as the nodes' background image, but for some reason it doesn't work for me. Here's my code:

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)'
    }
  }
];

Thanks in advance :)

Upvotes: 2

Views: 3170

Answers (2)

Tom Aerts
Tom Aerts

Reputation: 338

put the svg (Data uri) in your data{..} and set background-image to data(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

    }])

Upvotes: 0

maxkfranz
maxkfranz

Reputation: 12242

If your SVG doesn't load, then the SVG image is invalid or doesn't specify dimensions.

Upvotes: 2

Related Questions