245 lines
5.0 KiB
JavaScript
245 lines
5.0 KiB
JavaScript
/* [1] Gestion du sociogramme
|
|
=========================================================*/
|
|
/* (0) On recupere les elements importants */
|
|
var SOCIOGRAM = {
|
|
container: document.getElementById('sociogram'),
|
|
sigma: null,
|
|
|
|
request: { path: 'charts/network_data' },
|
|
response: null,
|
|
nodes: null,
|
|
edges: null
|
|
};
|
|
/* (0.5) Surcharge graph */
|
|
// On recupere les voisins d'un noeud
|
|
sigma.classes.graph.addMethod('nodeNeighbors', function(nodeId){
|
|
// On recupere les voisins du noeud courant
|
|
var neighbors = this.allNeighborsIndex[nodeId];
|
|
var tmp = neighbors;
|
|
|
|
// Et on recupere les voisins des voisins
|
|
for( subnodeId in tmp ){
|
|
var subneighbors = this.allNeighborsIndex[subnodeId];
|
|
for( subneighbor in subneighbors )
|
|
neighbors[subneighbor] = subneighbors[subneighbor];
|
|
}
|
|
|
|
// On retourne le resultat
|
|
return neighbors;
|
|
})
|
|
|
|
|
|
/* (0.8) Initialisation de SIGMA */
|
|
SOCIOGRAM.sigma = new sigma({renderer: { container:SOCIOGRAM.container, 'type': 'canvas' }});
|
|
|
|
|
|
|
|
|
|
|
|
/* (1) On recupere les informations via l'API */
|
|
api.send(SOCIOGRAM.request, function(response){
|
|
// Si erreur, on quitte
|
|
if( response.ModuleError != 0 ) return;
|
|
|
|
// Sinon on enregistre
|
|
SOCIOGRAM.response = response;
|
|
|
|
|
|
/* (2) Parametrage de SIGMA */
|
|
SOCIOGRAM.sigma.settings({
|
|
defaultNodeColor: '#348ed8',
|
|
defaultLabelSize: 14,
|
|
defaultLabelBGColor: "#ddd",
|
|
defaultHoverLabelBGColor: "#002147",
|
|
defaultLabelHoverColor: "#fff",
|
|
labelThreshold: 10,
|
|
defaultEdgeType: "curve"
|
|
});
|
|
|
|
|
|
/* (3) On recupere la liste des noeuds */
|
|
SOCIOGRAM.nodes = [];
|
|
|
|
// On calcule l'angle min
|
|
var ang = 2*Math.PI / SOCIOGRAM.response.data.alter.length;
|
|
|
|
// Parametres d'affichage
|
|
var ray = 500;
|
|
|
|
// Pour chaque alter
|
|
for( var i = 0 ; i < SOCIOGRAM.response.data.alter.length ; i++ ){
|
|
SOCIOGRAM.nodes.push({
|
|
'id': 'n-'+SOCIOGRAM.response.data.alter[i][0],
|
|
'label': SOCIOGRAM.response.data.alter[i][1],
|
|
'x': ray+ ray*Math.cos(ang*i),
|
|
'y': ray+ ray*Math.sin(ang*i),
|
|
'size': SOCIOGRAM.response.data.alter[i][2]
|
|
});
|
|
}
|
|
|
|
|
|
|
|
/* (4) On recupere la liste des liens */
|
|
SOCIOGRAM.edges = [];
|
|
|
|
for( var i = 0 ; i < SOCIOGRAM.response.data.inter.length ; i++ ){
|
|
SOCIOGRAM.edges.push({
|
|
'id': 'e-'+SOCIOGRAM.response.data.inter[i][0]+'-'+SOCIOGRAM.response.data.inter[i][1],
|
|
'source': 'n-'+SOCIOGRAM.response.data.inter[i][0],
|
|
'target': 'n-'+SOCIOGRAM.response.data.inter[i][1]
|
|
});
|
|
}
|
|
|
|
|
|
|
|
/* (5) On ajoute nos noeuds */
|
|
for( var i = 0 ; i < SOCIOGRAM.nodes.length ; i++)
|
|
SOCIOGRAM.sigma.graph.addNode(SOCIOGRAM.nodes[i]);
|
|
|
|
/* (6) On ajoute nos liens */
|
|
for( var i = 0 ; i < SOCIOGRAM.edges.length ; i++)
|
|
SOCIOGRAM.sigma.graph.addEdge(SOCIOGRAM.edges[i]);
|
|
|
|
/* (7) Gestion des interactions */
|
|
// On affiche que les voisins d'un noeud
|
|
SOCIOGRAM.sigma.bind('clickNode', function(e){
|
|
var nodeId = e.data.node.id;
|
|
// On recupere les voisins
|
|
var neighborNodes = SOCIOGRAM.sigma.graph.nodeNeighbors(nodeId);
|
|
neighborNodes[nodeId] = e.data.node; // on ajoute le noeud clique
|
|
|
|
SOCIOGRAM.sigma.graph.nodes().forEach(function(n) {
|
|
if( neighborNodes[n.id] ) n.color = n.originalColor;
|
|
else n.color = '#eee';
|
|
});
|
|
|
|
SOCIOGRAM.sigma.refresh();
|
|
});
|
|
|
|
// On affiche tous les noeuds quand on clique dans le vide
|
|
SOCIOGRAM.sigma.bind('clickStage', function(e){
|
|
SOCIOGRAM.sigma.graph.nodes().forEach(function(n) { n.color = n.originalColor; });
|
|
|
|
SOCIOGRAM.sigma.refresh();
|
|
});
|
|
|
|
/* (8) On affiche le graphique */
|
|
SOCIOGRAM.sigma.camera.ratio = 1.2;
|
|
SOCIOGRAM.sigma.refresh();
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// var i,
|
|
// s,
|
|
// o,
|
|
// L = 10,
|
|
// N = 100,
|
|
// E = 500,
|
|
// g = {
|
|
// nodes: [],
|
|
// edges: []
|
|
// },
|
|
// step = 0;
|
|
// // Generate a random graph:
|
|
// for (i = 0; i < N; i++) {
|
|
// o = {
|
|
// id: 'n' + i,
|
|
// label: 'Node ' + i,
|
|
// circular_x: L * Math.cos(Math.PI * 2 * i / N - Math.PI / 2),
|
|
// circular_y: L * Math.sin(Math.PI * 2 * i / N - Math.PI / 2),
|
|
// circular_size: Math.random(),
|
|
// circular_color: '#' + (
|
|
// Math.floor(Math.random() * 16777215).toString(16) + '000000'
|
|
// ).substr(0, 6),
|
|
// grid_x: i % L,
|
|
// grid_y: Math.floor(i / L),
|
|
// grid_size: 1,
|
|
// grid_color: '#ccc'
|
|
// };
|
|
// ['x', 'y', 'size', 'color'].forEach(function(val) {
|
|
// o[val] = o['grid_' + val];
|
|
// });
|
|
// g.nodes.push(o);
|
|
// }
|
|
// for (i = 0; i < E; i++)
|
|
// g.edges.push({
|
|
// id: 'e' + i,
|
|
// source: 'n' + (Math.random() * N | 0),
|
|
// target: 'n' + (Math.random() * N | 0),
|
|
// });
|
|
// // Instantiate sigma:
|
|
// s = new sigma({
|
|
// graph: g,
|
|
// renderer: { container: document.getElementById('graph-container'), 'type': 'canvas' },
|
|
// settings: {
|
|
// animationsTime: 1000
|
|
// }
|
|
// });
|
|
|
|
// setInterval(function(){
|
|
// var prefix = ['grid_', 'circular_'][step = +!step];
|
|
// sigma.plugins.animate(
|
|
// s,
|
|
// {
|
|
// x: prefix + 'x',
|
|
// y: prefix + 'y',
|
|
// size: prefix + 'size',
|
|
// color: prefix + 'color'
|
|
// }
|
|
// );
|
|
// }, 10000);
|