/* [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);