如何在json / gefx数据文件中添加图像并将其添加到sigma.js中的节点中
[英]how can i add images in json/gefx data file and add it in nodes in sigma.js
问题描述
我在网络图的节点和边缘添加json数据，我能够在节点和边缘显示所有数据（如x坐标，y坐标，颜色，id，标签）但不能显示url（图像） 。是否有任何解决方案可以显示所有节点中json数据的图像。
<div id="container">
<style>
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
</style>
<div id="graph-container"></div>
</div>
我的剧本是
<script>
/**
* This is a basic example on how to develop a custom node renderer. In
* this example, the renderer will display an image clipped in a disc,
* with a border colored according the node's "color" value.
*
* If a node as the value "image" to its attribute "type", then it will
* displayed with the node renderer "sigma.canvas.nodes.image", with the
* urls being its "urls" value.
*
* IMPORTANT: This node renderer just works with the canvas renderer. If
* you do want to display images with the WebGL renderer, you will have
* to develop a specific WebGL node renderer.
*/
sigma.utils.pkg('sigma.canvas.nodes');
sigma.canvas.nodes.image = (function() {
var _cache = {},
_loading = {},
_callbacks = {};
// Return the renderer itself:
var renderer = function(node, context, settings) {
var args = arguments,
prefix = settings('prefix') || '',
size = node[prefix + 'size'],
color = node.color || settings('defaultNodeColor'),
url = node.url;
if (_cache[url]) {
context.save();
// Draw the clipping disc:
context.beginPath();
context.arc(
node[prefix + 'x'],
node[prefix + 'y'],
node[prefix + 'size'],
0,
Math.PI * 2,
true
);
context.closePath();
context.clip();
// Draw the image
context.drawImage(
_cache[url],
node[prefix + 'x'] - size,
node[prefix + 'y'] - size,
2 * size,
2 * size
);
// Quit the "clipping mode":
context.restore();
// Draw the border:
context.beginPath();
context.arc(
node[prefix + 'x'],
node[prefix + 'y'],
node[prefix + 'size'],
0,
Math.PI * 2,
true
);
context.lineWidth = size / 5;
context.strokeStyle = node.color || settings('defaultNodeColor');
context.stroke();
} else {
sigma.canvas.nodes.image.cache(url);
sigma.canvas.nodes.def.apply(
sigma.canvas.nodes,
args
);
}
};
// Let's add a public method to cache images, to make it possible to
// preload images before the initial rendering:
// renderer.cache = function(url, callback) {
// if (callback)
// _callbacks[url] = callback;
//
// if (_loading[url])
// return;
//
// var img = new Image();
//
// img.onload = function() {
// _loading[url] = false;
// _cache[url] = img;
//
// if (_callbacks[url]) {
// _callbacks[url].call(this, img);
// delete _callbacks[url];
// }
// };
//
// _loading[url] = true;
// img.src = url;
// };
return renderer;
})();
// Now that's the renderer has been implemented, let's generate a graph
// to render:
var i,
s1,
img,
// N = 10,
// E = 10,
g1 = {
nodes: [
{
"label": "Sciences De La Terre",
"x": 112.2230224609375,
"y": -2.055976390838623,
"id": "n0",
"url":'img/img1.png',
"color": "rgb(255,204,102)",
"size": 8.540210723876953
} , {
"label": "Physique",
"x": 1883.59228515625,
"y": 24.318912506103516,
"id": "n1",
"url":'img/img2.png',
"color": "rgb(255,255,51)",
"size": 4.293514728546143
}, {
"label": "Pays Nordique",
"x": -659.119140625,
"y": -1094.1265869140625,
"id": "n2",
"url":'img/img3.png',
"color": "rgb(255,51,51)",
"size": 4.6399359703063965
}, {
"label": "Pigb",
"x": 324.859130859375,
"y": -200.34991455078125,
"id": "n3",
"url":'img/img4.png',
"color": "rgb(153,255,255)",
"size": 4.39528751373291
}, {
"label": "Poussée D\u0027Archimède,1",
"x": 3051.099853515625,
"y": 905.1744384765625,
"id": "n4",
"url":'img/book.jpeg',
"attributes": {
"nodedef": "n1525"
},
"color": "rgb(255,255,0)",
"size": 4.0340681076049805
}, {
"label": "Pollution Control",
"x": -1381.4327392578125,
"y": 969.9300537109375,
"id": "n5",
"url":'img/burger.jpeg',
"color": "rgb(102,102,0)",
"size": 4.075808525085449
}, {
"label": "Baleine Grise",
"x": -176.243896484375,
"y": -979.921875,
"id": "n6",
"url":'img/car.jpeg',
"color": "rgb(153,255,0)",
"size": 4.206028938293457
}, {
"label": "Arctic Summer",
"x": -252.80731201171875,
"y": 1699.3084716796875,
"id": "n7",
"url":'img/house.jpeg',
"color": "rgb(0,204,204)",
"size": 4.39528751373291
}, {
"label": "Métaux Lourds",
"x": 1217.7490234375,
"y": -1729.1802978515625,
"id": "n8",
"url":'img/house1.jpeg',
"color": "rgb(102,102,0)",
"size": 4.6399359703063965
}
, {
"label": "Port En Eau Profonde",
"x": 66.55622863769531,
"y": -1956.13330078125,
"id": "n9",
"url":'img/img5.jpeg',
"color": "rgb(153,0,0)",
"size": 4.0340681076049805
}, {
"label": "Decroissance Soutenable",
"x": 425.0431823730469,
"y": -1451.91259765625,
"id": "n10",
"url":'img/cube.jpeg',
"color": "rgb(255,51,51)",
"size": 4.206028938293457
}, {
"label": "Glacier Rocheux",
"x": 714.1744384765625,
"y": -146.1813201904297,
"id": "n11",
"url":'img/ball.jpeg',
"color": "rgb(153,255,255)",
"size": 4.133297443389893
},
{
"label": "Fleuve Amour",
"x": -529.2616577148438,
"y": -1068.8953857421875,
"id": "n12",
"url":'img/telephone.jpeg',
"color": "rgb(102,0,102)",
"size": 4.0086140632629395
}, {
"label": "Weather Satellite",
"x": 353.239501953125,
"y": 2159.915283203125,
"id": "n13",
"url":'img/cherry.jpeg',
"color": "rgb(255,153,153)",
"size": 4.936610698699951
}
],
edges: [
{
"source": "n0",
"target": "n1",
"id": "e1",
"label":"label-1"
}, {
"source": "n0",
"target": "n2",
"id": "e2",
"label":"label-2"
}, {
"source": "n0",
"target": "n3",
"id": "e3",
"label":"label-3"
}, {
"source": "n0",
"target": "n4",
"id": "e4",
"label":"label-4"
}, {
"source": "n0",
"target": "n5",
"id": "e5",
"label":"label-5"
}, {
"source": "n0",
"target": "n6",
"id": "e6",
"label":"label-6"
}, {
"source": "n0",
"target": "n7",
"id": "e7",
"label":"label-7"
}, {
"source": "n0",
"target": "n8",
"id": "e8",
"label":"label-8"
}, {
"source": "n0",
"target": "n9",
"id": "e9",
"label":"label-9"
}, {
"source": "n0",
"target": "n10",
"id": "e10",
"label":"label-10"
}
, {
"source": "n0",
"target": "n11",
"id": "e11",
"label":"label-11"
}, {
"source": "n0",
"target": "n12",
"id": "e12",
"label":"label-12"
},
{
"source": "n0",
"target": "n13",
"id": "e13",
"label":"label-13"
}, {
"source": "n0",
"target": "n13",
"id": "e14",
"label":"label-14"
} ]
},
loaded = 0 ;
function getImages(input, field){
var images = [];
for(var i=0; i<input.length ; i ++)
images.push(input[i][field]);
return images;
}
var urls = getImages(g1.nodes, "url");
// Generate a random graph, with ~30% nodes having the type "image":
for (i = 0; i < g1.nodes; i++) {
img = Math.random() >= 0;
g1.nodes.push({
id: g1.nodes[i].id,
type: 'image' ,
url: g1.nodes[i].url,
x: g1.nodes[i].x,
y: g1.nodes[i].y,
size: g1.nodes[i].size,
color: g1.nodes[i].color
});
}
console.log("x coord *****" + g1.nodes[i].x);
console.log("image urls"+ g1.nodes[i].url);
for (i = 0; i < g1.edges; i++)
g1.edges.push({
id: 'e' + i,
// source: 'n' + (Math.random() * N | 0),
source:g1.edges[i].source,
target: g1.edges[i].target,
});
// Then, wait for all images to be loaded before instanciating sigma:
console.log("result" + urls);
urls.forEach(function(url) {
console.log("url image"+ url);
sigma.canvas.nodes.image.cache( url, function () {
// console.log("all images"+urls);
if (++loaded === urls.length)
// Instantiate sigma:
// console.log("hello");
s1 = new sigma({
graph: g1,
renderer: {
// IMPORTANT:
// This works only with the canvas renderer, so the
// renderer type set as "canvas" is necessary here.
container: document.getElementById('graph-container'),
type: 'canvas'
},
settings: {
minNodeSize: 16,
maxNodeSize: 16,
}
});
}
);
// }
});
</script>
1 个解决方案
解决方案1
0 2016-03-04 04:14:15
您可以将图像转换为byte形式，然后在base64进行编码，并将编码数据添加到json对象。
请参阅此进行详细的解释。
如何将 CSS 属性添加到 sigma.js（画布渲染器）上的选定节点
[英]How to add a CSS property to selected nodes on sigma.js (canvas renderer)
我可以在自执行函数中导入Javascript库文件（在这种情况下为sigma.js）吗？
[英]Can I import a Javascript library file (in this case sigma.js) in a self executing function?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.