--- a/integration/js/treemap.js Tue Nov 27 18:08:06 2012 +0100
+++ b/integration/js/treemap.js Wed Dec 12 18:17:52 2012 -0800
@@ -1,93 +1,93 @@
-/* Génération de données aléatoires */
+$(function(){
+
+ var data = [],
+ startcolor = [ 0, 0, 255 ],
+ endcolor = [ 255, 255, 0 ]
+ elementcount = 8;
-var data = [],
- startcolor = [ 0, 0, 255 ],
- endcolor = [ 255, 255, 0 ]
- elementcount = 8;
-
-for (var i = 0; i < elementcount; i++) {
- var r = i/elementcount,
- col = _(endcolor).map(function(e,i) {
- var s = startcolor[i]
- return Math.floor(r*e + (1-r)*s)
+ for (var i = 0; i < elementcount; i++) {
+ var r = i/elementcount,
+ col = _(endcolor).map(function(e,i) {
+ var s = startcolor[i]
+ return Math.floor(r*e + (1-r)*s)
+ });
+ data.push({
+ label: "Cluster " + (1+i),
+ i: i+1,
+ color: "rgb("+col.join(",")+")",
+ value: 1+Math.pow(Math.random(),2)*5
});
- data.push({
- label: "Cluster " + (1+i),
- i: i+1,
- color: "rgb("+col.join(",")+")",
- value: 1+Math.pow(Math.random(),2)*5
- });
-}
+ }
+
+ /* Génération du Treemap */
-/* Génération du Treemap */
+ data = _(data).sortBy(function(d) { return -d.value; });
-data = _(data).sortBy(function(d) { return -d.value; });
+ var IDEALRATIO = 1.25;
-var IDEALRATIO = 1.25;
-
-function cuttree(data, x, y, w, h, cut, ratio, callback) {
-
- function f(subdata, subx, suby, subw, subh) {
- if (subdata.length == 1) {
- subdata[0].x = subx;
- subdata[0].y = suby;
- subdata[0].w = subw;
- subdata[0].h = subh;
+ function cuttree(data, x, y, w, h, cut, ratio, callback) {
+
+ function f(subdata, subx, suby, subw, subh) {
+ if (subdata.length == 1) {
+ subdata[0].x = subx;
+ subdata[0].y = suby;
+ subdata[0].w = subw;
+ subdata[0].h = subh;
+ } else {
+ callback(subdata, subx, suby, subw, subh)
+ }
+ }
+
+ var first = _(data).first(cut), rest = _(data).rest(cut);
+ if (!first.length || !rest.length) {
+ return;
+ }
+ if (w/h > IDEALRATIO) {
+ var leftw = w * ratio;
+ f(first, x, y, leftw, h);
+ f(rest, x + leftw, y, w - leftw, h);
} else {
- callback(subdata, subx, suby, subw, subh)
+ var toph = h * ratio;
+ f(first, x, y, w, toph);
+ f(rest, x, y + toph, w, h - toph);
}
}
-
- var first = _(data).first(cut), rest = _(data).rest(cut);
- if (!first.length || !rest.length) {
- return;
+
+ function pivot(data, x, y, w, h) {
+ var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
+ for (var i = 0; i < data.length - 1; i++) {
+ cumul += data[i].value;
+ var delta = Math.abs(cumul - total/2);
+ if (delta < bestcut) {
+ bestcut = delta;
+ bestcumul = cumul;
+ cut = i+1;
+ } else {
+ break;
+ }
+ }
+ cuttree(data, x, y, w, h, cut, bestcumul / total, pivot);
}
- if (w/h > IDEALRATIO) {
- var leftw = w * ratio;
- f(first, x, y, leftw, h);
- f(rest, x + leftw, y, w - leftw, h);
- } else {
- var toph = h * ratio;
- f(first, x, y, w, toph);
- f(rest, x, y + toph, w, h - toph);
- }
-}
-function pivot(data, x, y, w, h) {
- var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
- for (var i = 0; i < data.length - 1; i++) {
- cumul += data[i].value;
- var delta = Math.abs(cumul - total/2);
- if (delta < bestcut) {
- bestcut = delta;
- bestcumul = cumul;
- cut = i+1;
- } else {
- break;
+ function squarify(data, x, y, w, h) {
+ var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
+ for (var i = 0; i < data.length - 1; i++) {
+ cumul += data[i].value;
+ cuttree(data, x, y, w, h, i+1, cumul / total, pivot);
+ var ratio = Math.abs(Math.log(IDEALRATIO*data[0].h/data[0].w));
+ if (ratio < bestcut) {
+ bestcut = ratio;
+ bestcumul = cumul;
+ cut = i+1;
+ } else {
+ break;
+ }
}
+ cuttree(data, x, y, w, h, cut, bestcumul / total, squarify);
}
- cuttree(data, x, y, w, h, cut, bestcumul / total, pivot);
-}
-function squarify(data, x, y, w, h) {
- var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
- for (var i = 0; i < data.length - 1; i++) {
- cumul += data[i].value;
- cuttree(data, x, y, w, h, i+1, cumul / total, pivot);
- var ratio = Math.abs(Math.log(IDEALRATIO*data[0].h/data[0].w));
- if (ratio < bestcut) {
- bestcut = ratio;
- bestcumul = cumul;
- cut = i+1;
- } else {
- break;
- }
- }
- cuttree(data, x, y, w, h, cut, bestcumul / total, squarify);
-}
-
-/* Template des éléments à insérer */
-var actu =
+ /* Template des éléments à insérer */
+ var actu =
'<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+
'<a href="#">'+
'<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+
@@ -97,16 +97,14 @@
'<h2><a href="#"><%-label%></a></h2>'+
'<div class="links">'+
'<ul>'+
- '<li><a href="#" title="Supprimer le cluster" class="trash"></a></li>'+
'<li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>'+
- '<li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>';
-$(function(){
+
//treemap
var tmpl = _.template(actu);
var hTreemap = 800;//à définir
@@ -122,33 +120,37 @@
var wActu = $(this).width();
var hActu = $(this).height();
var img = $(this).find('img');
- var wImg = img.width();
- var hImg = img.height();
+ img.load(function(){
+ var img = $(this);
- var ratioImg = wImg/hImg;
- img.css('height',hActu);
- img.css('width',hActu*ratioImg);
- wImg = img.width();
- hImg = img.height();
+ var wImg = img.width();
+ var hImg = img.height();
- if(wActu>wImg){
- var ratioImg = hImg/wImg;
- img.css('width', wActu);
- img.css('height',wActu*ratioImg);
+ var ratioImg = wImg/hImg;
+ img.css('height',hActu);
+ img.css('width',hActu*ratioImg);
wImg = img.width();
hImg = img.height();
- }
+
+ if(wActu>wImg){
+ var ratioImg = hImg/wImg;
+ img.css('width', wActu);
+ img.css('height',wActu*ratioImg);
+ wImg = img.width();
+ hImg = img.height();
+ }
- if (wImg<wActu) {
- img.css('margin-left',(wActu-wImg)/2);
- }else{
- img.css('margin-left',-(wImg-wActu)/2);
- }
- if (hImg<hActu) {
- img.css('margin-top',(hActu-hImg)/2);
- }else{
- img.css('margin-top',-(hImg-hActu)/2);
- }
+ if (wImg<wActu) {
+ img.css('margin-left',(wActu-wImg)/2);
+ }else{
+ img.css('margin-left',-(wImg-wActu)/2);
+ }
+ if (hImg<hActu) {
+ img.css('margin-top',(hActu-hImg)/2);
+ }else{
+ img.css('margin-top',-(hImg-hActu)/2);
+ }
+ });
});
$("#liste").hide();