diff -r efd9c589177a -r c0b4a8b5a012 toolkit/exemples/treemap/script.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/toolkit/exemples/treemap/script.js Thu Apr 10 14:20:23 2014 +0200 @@ -0,0 +1,68 @@ + +// On cr�e l'objet relations qui va nous permettre d'ajouter des animations et des effets sur les cases de treemap +var r = new Relations(); + +var couleurs = new Couleurs(20); + +//* +var parametresStreamgraphTimeline = { + name: "streamgraphTimeline", + selector: "#streamgraphTimeline", + activerSelection : true, + activerTimeline: true, + activerCurseur: true, + hauteur: 50, + largeur: 800, + relations: r, + couleurs: couleurs +}; + +var streamgraphTimeline = new Streamgraph(json.clusters, parametresStreamgraphTimeline); +//*/ + +//* +var parametresTreemap = { + name: "treemap", + selector: "#treemap", + hauteur: 400, + largeur: 800, + relations: r, + template: { + selector: "#streamgraphTemplate", + directives: { + "img@src": "urlImage", + "img@title": "titreArticle", + "img@alt": "titreArticle", + "img@width": "widthImage", + "img@height": "heightImage", + "img@style+": "cssOffsetImage", + "p.title": "titreArticle", + "p.title@style+": "cssWidthArticle" + } + }, + couleurs: couleurs +}; +var treemap = new Treemap(json, parametresTreemap); +//*/ + +//* +r.get("streamgraphTimeline").bind("selectionResize", "treemap", + function(objet, params) { objet.transition(params[0], params[1]); }); + +function placerCurseur(cluster) { + streamgraphTimeline.placerCurseur(parseInt(cluster.attr("datetime")), 'index'); + streamgraphTimeline.showCursor(); +} + +function cacherCurseur() { + streamgraphTimeline.hideCursor(); +} + +for (var i = 0; i<10; ++i) { + var cluster = r.get("treemap.cluster." + i); + cluster.mouseover(treemap.focus) + .mouseout(treemap.blur) + .mouseover(placerCurseur) + .mouseout(cacherCurseur); +} +//*/ \ No newline at end of file