cytoscape js,如何使用 json 数据文件中的背景图像定义节点
cytoscape js, how define node with background-image from a json data file
我想使用 cytoscape 库来构建示例图,但我想在每个节点上显示不同的图像。
我试过了:
[
{
"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
}
]
但是当我加载我的页面时,我看到两个 'empty' 节点。我使用了这个 javascript 脚本:
fetch('data.json', {mode: 'no-cors'})
.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
});
});
我的错误在哪里?如何在每个节点上生成具有不同背景图像的图形?
谢谢你:)
这是我的解决方案:
https://plnkr.co/edit/lKjxkMS8F1E68Mk70fjS?p=preview
对于#cy设置为css很重要。
#cy {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
}
编辑:
这是正确的 -> 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 库来构建示例图,但我想在每个节点上显示不同的图像。
我试过了:
[
{
"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
}
]
但是当我加载我的页面时,我看到两个 'empty' 节点。我使用了这个 javascript 脚本:
fetch('data.json', {mode: 'no-cors'})
.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
});
});
我的错误在哪里?如何在每个节点上生成具有不同背景图像的图形?
谢谢你:)
这是我的解决方案: https://plnkr.co/edit/lKjxkMS8F1E68Mk70fjS?p=preview
对于#cy设置为css很重要。
#cy {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
}
编辑: 这是正确的 -> 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
}