cytoscape / cytoscape.js

Graph theory (network) library for visualisation and analysis
https://js.cytoscape.org
MIT License
10.09k stars 1.64k forks source link

How define node with background-image from a json data file ? #2031

Closed AformacWEBDEV3brive1 closed 6 years ago

AformacWEBDEV3brive1 commented 6 years ago

I want use cytoscape librairy for build a sample graphs but I want display on each node different images. I tried that :

[ 
  {
    "data": [
      "id0"
    ],
    "position": {
      "x": 44,
      "y": 93
    }
  },
  {
    "data": [
      "id1"
    ],
    "position": {
      "x": 77,
      "y": 200
    },
    "background-image": [
      "https://upload.wikimedia.org/wikipedia/commons/b/b4/High_above_the_Cloud_the_Sun_Stays_the_Same.jpg",
      "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Pigeon_silhouette_4874.svg/1000px-Pigeon_silhouette_4874.svg.png"
    ],
    "background-fit": "cover cover",
    "background-image-opacity": 0.5
  }
]

But when I load my page I see two 'empty' nodes. I used this javascript script :

fetch('data.json')
  .then(function(res) {
    return res.json()
  })
  .then(function(data) {
    var cy = window.cy = cytoscape({
      container: document.getElementById('cy'),

      layout: {
        name: 'preset',
      },

      style: [
        {
          selector: 'node',
          style: {
            'height': 20,
            'width': 20,
          }
        }
      ],

      elements: data
    });
  }); 

Where is my mistake ? How can I generate a graph with different background images on each nodes ?

Thanks you :)

maxkfranz commented 6 years ago

The issue tracker is for feature requests and bug reports. This is not a support forum.