Comment sociogramme animé
This commit is contained in:
parent
5ebc8891ac
commit
45b5c17e72
2
view.php
2
view.php
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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);
|
Loading…
Reference in New Issue