|
1 |
|
2 // On cr�e l'objet relations qui va nous permettre d'ajouter des animations et des effets sur les cases de treemap |
|
3 var r = new Relations(); |
|
4 |
|
5 var couleurs = new Couleurs(20); |
|
6 |
|
7 //* |
|
8 var parametresStreamgraphTimeline = { |
|
9 name: "streamgraphTimeline", |
|
10 selector: "#streamgraphTimeline", |
|
11 activerSelection : true, |
|
12 activerTimeline: true, |
|
13 activerCurseur: true, |
|
14 hauteur: 50, |
|
15 largeur: 800, |
|
16 relations: r, |
|
17 couleurs: couleurs |
|
18 }; |
|
19 |
|
20 var streamgraphTimeline = new Streamgraph(json.clusters, parametresStreamgraphTimeline); |
|
21 //*/ |
|
22 |
|
23 //* |
|
24 var parametresTreemap = { |
|
25 name: "treemap", |
|
26 selector: "#treemap", |
|
27 hauteur: 400, |
|
28 largeur: 800, |
|
29 relations: r, |
|
30 template: { |
|
31 selector: "#streamgraphTemplate", |
|
32 directives: { |
|
33 "img@src": "urlImage", |
|
34 "img@title": "titreArticle", |
|
35 "img@alt": "titreArticle", |
|
36 "img@width": "widthImage", |
|
37 "img@height": "heightImage", |
|
38 "img@style+": "cssOffsetImage", |
|
39 "p.title": "titreArticle", |
|
40 "p.title@style+": "cssWidthArticle" |
|
41 } |
|
42 }, |
|
43 couleurs: couleurs |
|
44 }; |
|
45 var treemap = new Treemap(json, parametresTreemap); |
|
46 //*/ |
|
47 |
|
48 //* |
|
49 r.get("streamgraphTimeline").bind("selectionResize", "treemap", |
|
50 function(objet, params) { objet.transition(params[0], params[1]); }); |
|
51 |
|
52 function placerCurseur(cluster) { |
|
53 streamgraphTimeline.placerCurseur(parseInt(cluster.attr("datetime")), 'index'); |
|
54 streamgraphTimeline.showCursor(); |
|
55 } |
|
56 |
|
57 function cacherCurseur() { |
|
58 streamgraphTimeline.hideCursor(); |
|
59 } |
|
60 |
|
61 for (var i = 0; i<10; ++i) { |
|
62 var cluster = r.get("treemap.cluster." + i); |
|
63 cluster.mouseover(treemap.focus) |
|
64 .mouseout(treemap.blur) |
|
65 .mouseover(placerCurseur) |
|
66 .mouseout(cacherCurseur); |
|
67 } |
|
68 //*/ |