philogb / jit

The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web
http://thejit.org
Other
1.51k stars 297 forks source link

Treemap: patch to fix gaps between boxes #5

Closed timbunce closed 15 years ago

timbunce commented 15 years ago

This patch isn't a complete fix, but it does greatly improve the behaviour.

The boxes get packed at integer pixel boundaries, so the random gaps are minimized and now tend to accumulate naturally at the top/right of the containing boxes.

===================================================================
--- jit.js  (revision 785)
+++ jit.js  (working copy)
@@ -8564,9 +8564,9 @@
    layoutV: function(ch, w, coord) {
        var totalArea = 0; 
        $each(ch, function(elem) { totalArea += elem._area; });
-       var width = totalArea / w, top =  0; 
+       var width = Math.round(totalArea / w), top = 0; 
        for(var i=0; i<ch.length; i++) {
-           var h = ch[i]._area / width;
+           var h = Math.round(ch[i]._area / width);
            ch[i].coord = {
                'height': h,
                'width': width,
@@ -8590,14 +8590,14 @@
    layoutH: function(ch, w, coord) {
        var totalArea = 0; 
        $each(ch, function(elem) { totalArea += elem._area; });
-       var height = totalArea / w,
+       var height = Math.round(totalArea / w),
        top = coord.height - height, 
        left = 0;

        for(var i=0; i<ch.length; i++) {
            ch[i].coord = {
                'height': height,
-               'width': ch[i]._area / height,
+               'width': Math.round(ch[i]._area / height),
                'top': top,
                'left': coord.left + left
            };
philogb commented 15 years ago

Applied something similar to this patch here:

http://github.com/philogb/jit/commit/48f64456508bba833a8d554fbe38862b8498f71e

Should be in 1.1.3