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

View File

@ -32,7 +32,7 @@
<!-- 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-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>
<body>

View File

@ -12,7 +12,7 @@ var SOCIOGRAM = {
};
/* (0.5) Surcharge graph */
// 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
var neighbors = this.allNeighborsIndex[nodeId];
var tmp = neighbors;
@ -105,7 +105,7 @@ api.send(SOCIOGRAM.request, function(response){
SOCIOGRAM.sigma.bind('clickNode', function(e){
var nodeId = e.data.node.id;
// 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
SOCIOGRAM.sigma.graph.nodes().forEach(function(n) {
@ -184,62 +184,62 @@ api.send(SOCIOGRAM.request, function(response){
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
}
});
// 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);
// 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);