Question

我想使用cytoscape librairy来构建示例图，但我希望在每个节点上显示不同的图像。

我试过了：

/* globals global */
require('jsdom-global')()
const chai    = require('chai')
const sinon   = require('sinon')

// use Sinon test spies/stubs/mocks in all tests
chai.use(require('chai-sinon'))

// expose libs to all tests
global.chai     = chai
global.sinon    = sinon
global.expect   = chai.expect

但是当我加载页面时，我看到两个“空”节点。我使用了这个javascript脚本：

[ 
  {
    "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
  }
]

我的错误在哪里？如何在每个节点上生成具有不同背景图像的图形？

谢谢你:)

Answer 1

这是我的解决方案： https://plnkr.co/edit/lKjxkMS8F1E68Mk70fjS?p=preview

重要的是设置为 #cy 的css。

#cy {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

编辑：这是正确的 - ＆gt; https://plnkr.co/edit/lKjxkMS8F1E68Mk70fjS?p=preview

必然是“background-image”换行标签“style”。

"style": {
  "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
}

cytoscape js，如何用json数据文件定义带有background-image的节点

1 个答案: