how can i add images in json/gefx data file and add it in nodes in sigma.js
Question
I am adding json data in nodes and edges of network graph, i am able to display all the data (like x-coordinate, y-coordinate,color,id,label)in nodes and edges but not able to display url(images).is there any solution to display images from json data in all the nodes.
<div id="container">
<style>
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
</style>
<div id="graph-container"></div>
</div>
and my script is
<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 answers
solution1
0 2016-03-04 04:14:15
You can convert the image to byte form, then encode it in base64 and add the encoded data to the json object.
Refer this for detailed explaination.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Add onclick event to nodes in Sigma.js
How to add a CSS property to selected nodes on sigma.js (canvas renderer)
How to display data from a JSON object with sigma.js
How to add background image with zoom in/out to sigma.js
How can I center a node in Sigma.js?
Sigma.js Search for Nodes
Load JSON file in Sigma.js but can't bind overEdge Event
Sigma.js - displaying edge labels and using external json file
sigma.js: can't display graph with json
Can I import a Javascript library file (in this case sigma.js) in a self executing function?
Related Tags