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 -->
|
||||
<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>
|
||||
|
||||
|
|
|
@ -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);
|
Loading…
Reference in New Issue