xdrm-brackets
/
NxTIC
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Comment sociogramme animé

This commit is contained in:
xdrm-brackets 2016-04-15 15:12:31 +02:00
parent 5ebc8891ac
commit 45b5c17e72
2 changed files with 61 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
view.php
View File

@ -32,7 +32,7 @@
<!-- Librairies Externes Javascript --> <!-- Librairies Externes Javascript -->
<script type='text/javascript' src='/f/js/sigma-min/sigma' ></script> <!-- Gestion du graphique de type réseau --> <script type='text/javascript' src='/f/js/sigma-min/sigma' ></script> <!-- Gestion du graphique de type réseau -->
<script type='text/javascript' src='/f/js/sigma-plugins-animate-min/sigma/plugins' ></script> <!-- Gestion du JSON pour le graphique reseau --> <!-- <script type='text/javascript' src='/f/js/sigma-plugins-animate-min/sigma/plugins' ></script> for animations -->
</head> </head>
<body> <body>

120
view/js/charts.js
View File

@ -12,7 +12,7 @@ var SOCIOGRAM = {
}; };
/* (0.5) Surcharge graph */ /* (0.5) Surcharge graph */
// On recupere les voisins d'un noeud // On recupere les voisins d'un noeud
sigma.classes.graph.addMethod('getNeighbords', function(nodeId){ sigma.classes.graph.addMethod('nodeNeighbors', function(nodeId){
// On recupere les voisins du noeud courant // On recupere les voisins du noeud courant
var neighbors = this.allNeighborsIndex[nodeId]; var neighbors = this.allNeighborsIndex[nodeId];
var tmp = neighbors; var tmp = neighbors;
@ -105,7 +105,7 @@ api.send(SOCIOGRAM.request, function(response){
SOCIOGRAM.sigma.bind('clickNode', function(e){ SOCIOGRAM.sigma.bind('clickNode', function(e){
var nodeId = e.data.node.id; var nodeId = e.data.node.id;
// On recupere les voisins // On recupere les voisins
var neighborNodes = SOCIOGRAM.sigma.graph.getNeighbords(nodeId); var neighborNodes = SOCIOGRAM.sigma.graph.nodeNeighbors(nodeId);
neighborNodes[nodeId] = e.data.node; // on ajoute le noeud clique neighborNodes[nodeId] = e.data.node; // on ajoute le noeud clique
SOCIOGRAM.sigma.graph.nodes().forEach(function(n) { SOCIOGRAM.sigma.graph.nodes().forEach(function(n) {
@ -184,62 +184,62 @@ api.send(SOCIOGRAM.request, function(response){
var i, // var i,
s, // s,
o, // o,
L = 10, // L = 10,
N = 100, // N = 100,
E = 500, // E = 500,
g = { // g = {
nodes: [], // nodes: [],
edges: [] // edges: []
}, // },
step = 0; // step = 0;
// Generate a random graph: // // Generate a random graph:
for (i = 0; i < N; i++) { // for (i = 0; i < N; i++) {
o = { // o = {
id: 'n' + i, // id: 'n' + i,
label: 'Node ' + i, // label: 'Node ' + i,
circular_x: L * Math.cos(Math.PI * 2 * i / N - Math.PI / 2), // 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_y: L * Math.sin(Math.PI * 2 * i / N - Math.PI / 2),
circular_size: Math.random(), // circular_size: Math.random(),
circular_color: '#' + ( // circular_color: '#' + (
Math.floor(Math.random() * 16777215).toString(16) + '000000' // Math.floor(Math.random() * 16777215).toString(16) + '000000'
).substr(0, 6), // ).substr(0, 6),
grid_x: i % L, // grid_x: i % L,
grid_y: Math.floor(i / L), // grid_y: Math.floor(i / L),
grid_size: 1, // grid_size: 1,
grid_color: '#ccc' // grid_color: '#ccc'
}; // };
['x', 'y', 'size', 'color'].forEach(function(val) { // ['x', 'y', 'size', 'color'].forEach(function(val) {
o[val] = o['grid_' + val]; // o[val] = o['grid_' + val];
}); // });
g.nodes.push(o); // g.nodes.push(o);
} // }
for (i = 0; i < E; i++) // for (i = 0; i < E; i++)
g.edges.push({ // g.edges.push({
id: 'e' + i, // id: 'e' + i,
source: 'n' + (Math.random() * N | 0), // source: 'n' + (Math.random() * N | 0),
target: 'n' + (Math.random() * N | 0), // target: 'n' + (Math.random() * N | 0),
}); // });
// Instantiate sigma: // // Instantiate sigma:
s = new sigma({ // s = new sigma({
graph: g, // graph: g,
renderer: { container: document.getElementById('graph-container'), 'type': 'canvas' }, // renderer: { container: document.getElementById('graph-container'), 'type': 'canvas' },
settings: { // settings: {
animationsTime: 1000 // animationsTime: 1000
} // }
}); // });
setInterval(function(){ // setInterval(function(){
var prefix = ['grid_', 'circular_'][step = +!step]; // var prefix = ['grid_', 'circular_'][step = +!step];
sigma.plugins.animate( // sigma.plugins.animate(
s, // s,
{ // {
x: prefix + 'x', // x: prefix + 'x',
y: prefix + 'y', // y: prefix + 'y',
size: prefix + 'size', // size: prefix + 'size',
color: prefix + 'color' // color: prefix + 'color'
} // }
); // );
}, 10000); // }, 10000);