Treemap: border + mouseover border gap

[bmesuere]

• The border around an element is a few pixels off at the right and bottom: http://i.imgur.com/EDWjH.png
• Sometimes no border is shown between elements. You can see this on the screenshot at the lower left corner between "bifidobacterium longum" and "atopobium parv..."

[philogb]

Hi - Thanks for the report.

What is the offset value in your configuration? Could you paste your configuration or link to a test case?

Thanks,

On Fri, May 27, 2011 at 4:27 AM, bmesuere < [email protected]>wrote:

• The border around an element is a few pixels off at the right and bottom: http://i.imgur.com/EDWjH.png
• Sometimes no border is shown between elements. You can see this on the screenshot at the lower left corner between "bifidobacterium longum" and "atopobium parv..."

Reply to this email directly or view it on GitHub: https://github.com/philogb/jit/issues/64

Nicolas Garcia Belmonte - http://philogb.github.com/

[bmesuere]

Hi,

Below you can find the configuration I'm using. The treemap is currently being used in an unreleased university project. If necessary, I can create a static page containing the treemap of the screenshot. I'm using Google Chrome and v2.0.1.

function initTreeMap(data) {
    //init TreeMap
    var tm = new $jit.TM.Squarified({
        //where to inject the visualization
        injectInto: 'treeMap',
        //parent box title heights
        titleHeight: 15,
        //enable animations
        animate: animate,
        //box offsets
        offset: 0,
        //constrained: true,
        //levelsToShow: 1,
        //Attach left and right click events
        Events: {
            enable: true,
            onClick: function(node) {
                if (node) {
                    tm.enter(node);
                    $("#jstree_search").val(node.name);
                    $("#jstree_search").change();
                }
            },
            onRightClick: function() {
                tm.out();
            }
        },
        duration: 1000,
        //Enable tips
        Tips: {
            enable: true,
            //add positioning offsets
            offsetX: 20,
            offsetY: 20,
            //implement the onShow method to
            //add content to the tooltip when a node
            //is hovered
            onShow: function(tip, node, isLeaf, domElement) {
                var title = "";
                if (node.data.count != 0)
                title = node.name + " (" + node.data.count + ")";
                else
                title = node.name;
                var html = "<div class=\"tip-title\">" + title
                + "</div><div class=\"tip-text\"></div>";
                var data = node.data;
                tip.innerHTML = html;
            }
        },

        //Add the name of the node in the correponding label
        //This method is called once, on label creation.
        onCreateLabel: function(domElement, node) {
            if (node.data.count != 0)
            domElement.innerHTML = node.name + " (" + node.data.count + ")";
            else
            domElement.innerHTML = node.name;
            var style = domElement.style;
            style.display = '';
            style.border = '2px solid transparent';
            domElement.onmouseover = function() {
                style.border = '2px solid #9FD4FF';
            };
            domElement.onmouseout = function() {
                style.border = '2px solid transparent';
            };
        }
    });
    tm.loadJSON(data);
    tm.refresh();
    //end
}

[bmesuere]

Hi,

I think I isolated part of the issue. The box offset parameter is incorrectly handled. First, the height and width are calculated with

height = max(chi.getData('height', prop) - offst - config.titleHeight, 0),
width = max(chi.getData('width', prop) - offst, 0),

Later, these values are used to define a coordinate object with

coord = {
   'width': width,
   'height': height,
   'top': chipos.y + config.titleHeight,
   'left': chipos.x
 };

The top and left values don't take into account the offset which makes the offset propagate in the lower right corner. This is clearly visible when you draw a treemap with multiple levels.

I think something like this should be more correct.

coord = {
   'width': width,
   'height': height,
   'top': chipos.y + config.titleHeight + offst / 2,
   'left': chipos.x + offst / 2
 };

I would like to fix this issue but before I begin coding, it would be nice to get some confirmation.

[XinCindyChen]

Although these posts are about one or two years old. I encountered the same problems with TreeMap borders recently. The issue two years ago remain unsolved, actually, I found the problem is not because of the computation of the top and left and offset as bmesuere mentioned, even when offset is 0, problem remains. I found the problem is related to to how css deals with the box borders. By default, it will add the border to the outside of the box width and height, so the entire box becomes bigger. The "left" and "top" of the box are based upon the top left corner. So, when the whole box is bigger, and the left top corner is fixed, the right and bottom will be longer than original. The solution I came up with is to add the following to the "node" class in the Treemap.css file, the default box-sizing is content-box rather than border-box, just specify it to border-box, and the gaps of the borders for the nodes will disappear.

.node{

 box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

}

[philogb]

Hi, thanks for the answer! If you want to create a PR for that change I'll happily merge it into the code base.

Thanks,

[nshah81]

I am using the below configuration. similar to bmesuere.. I would like to know if there is a way i can search or find within this treemap. And highlight the results when found.. Can the find be implemented with jquery or javascripting?

function initTreeMap(data) { //init TreeMap var tm = new $jit.TM.Squarified({ //where to inject the visualization injectInto: 'treeMap', //parent box title heights titleHeight: 15, //enable animations animate: animate, //box offsets offset: 0, //constrained: true, //levelsToShow: 1, //Attach left and right click events Events: { enable: true, onClick: function(node) { if (node) { tm.enter(node); $("#jstree_search").val(node.name); $("#jstree_search").change(); } }, onRightClick: function() { tm.out(); } }, duration: 1000, //Enable tips Tips: { enable: true, //add positioning offsets offsetX: 20, offsetY: 20, //implement the onShow method to //add content to the tooltip when a node //is hovered onShow: function(tip, node, isLeaf, domElement) { var title = ""; if (node.data.count != 0) title = node.name + " (" + node.data.count + ")"; else title = node.name; var html = "<div class="tip-title">" + title + "<div class="tip-text">"; var data = node.data; tip.innerHTML = html; } },

    //Add the name of the node in the correponding label
    //This method is called once, on label creation.
    onCreateLabel: function(domElement, node) {
        if (node.data.count != 0)
        domElement.innerHTML = node.name + " (" + node.data.count + ")";
        else
        domElement.innerHTML = node.name;
        var style = domElement.style;
        style.display = '';
        style.border = '2px solid transparent';
        domElement.onmouseover = function() {
            style.border = '2px solid #9FD4FF';
        };
        domElement.onmouseout = function() {
            style.border = '2px solid transparent';
        };
    }
});
tm.loadJSON(data);
tm.refresh();
//end

}