V1 affichage sociogramme, peu ergonomique, réfléchir a un système de positionnement relatif

This commit is contained in:
xdrm-brackets 2016-04-15 13:00:23 +02:00
parent 42e6fc9705
commit d2ad9576a6
2 changed files with 58 additions and 52 deletions

View File

@ -47,7 +47,6 @@
array( 4342, "Latasha", 21 ), array( 4342, "Latasha", 21 ),
array( 2957, "Coleen", 1 ), array( 2957, "Coleen", 1 ),
array( 2493, "Contreras", 100 ), array( 2493, "Contreras", 100 ),
array( 1895, "Roxanne", 27 ),
array( 4776, "Holmes", 97 ), array( 4776, "Holmes", 97 ),
array( 3623, "Hallie", 88 ), array( 3623, "Hallie", 88 ),
array( 3660, "Ginger", 26 ), array( 3660, "Ginger", 26 ),

View File

@ -3,69 +3,76 @@
/* (0) On recupere les elements importants */ /* (0) On recupere les elements importants */
var SOCIOGRAM = { var SOCIOGRAM = {
container: document.getElementById('sociogram'), container: document.getElementById('sociogram'),
sigma: null sigma: null,
request: { path: 'charts/network_data' },
response: null,
nodes: null,
edges: null
}; };
// Initialisation de SIGMA // Initialisation de SIGMA
SOCIOGRAM.sigma = new sigma(SOCIOGRAM.container); SOCIOGRAM.sigma = new sigma(SOCIOGRAM.container);
/* (1) On recupere les informations via l'API */ /* (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 */ /* (2) Parametrage de SIGMA */
SOCIOGRAM.sigma.settings({ SOCIOGRAM.sigma.settings({
defaultNodeColor: '#ec5148' defaultNodeColor: '#ec5148'
}); });
/* (3) On recupere la liste des noeuds */
var nodes = [
{
"id": "n0",
"label": "A node",
"x": 0,
"y": 0,
"size": 3
}, {
"id": "n1",
"label": "Another node",
"x": 3,
"y": 1,
"size": 2
}, {
"id": "n2",
"label": "And a last one",
"x": 1,
"y": 3,
"size": 1
}];
/* (4) On recupere la liste des liens */ /* (3) On recupere la liste des noeuds */
var edges = [{ SOCIOGRAM.nodes = [];
"id": "e0",
"source": "n0", // On calcule l'angle min
"target": "n1" var ang = 2*Math.PI / SOCIOGRAM.response.data.alter.length;
}, {
"id": "e1", // Pour chaque alter
"source": "n1", for( var i = 0 ; i < SOCIOGRAM.response.data.alter.length ; i++ ){
"target": "n2" SOCIOGRAM.nodes.push({
}, { 'id': 'n-'+SOCIOGRAM.response.data.alter[i][0],
"id": "e2", 'label': SOCIOGRAM.response.data.alter[i][1],
"source": "n2", 'x': 500+ 100*Math.cos(ang*i),
"target": "n0" 'y': 500+ 100*Math.sin(ang*i),
}]; 'size': SOCIOGRAM.response.data.alter[i][2]/10
});
}
/* (5) On ajoute nos noeuds */
for( var i = 0 ; i < nodes.length ; i++)
SOCIOGRAM.sigma.graph.addNode(nodes[i]);
/* (6) On ajoute nos liens */ /* (4) On recupere la liste des liens */
for( var i = 0 ; i < edges.length ; i++) SOCIOGRAM.edges = [];
SOCIOGRAM.sigma.graph.addEdge(edges[i]);
/* (7) Gestion des interactions */ 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]
});
}
/* (8) On affiche le graphique */
SOCIOGRAM.sigma.camera.ratio = 2; /* (5) On ajoute nos noeuds */
SOCIOGRAM.sigma.refresh(); 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 */
/* (8) On affiche le graphique */
SOCIOGRAM.sigma.camera.ratio = 2;
SOCIOGRAM.sigma.refresh();
});