0

The label on the left most node disappears if the node is partially displayed on the canvas. How do I resolve this?

Thanks

Raj Verma
  • 1
  • 1

2 Answers2

0

InfoVis tries to hide the node labels when it asserts that the label would fall off the canvas, if it were to be displayed on the node.

It basically computes the canvas position and dimensions, the node position and dimensions, and tries to see if the label's position is out of the canvas.

This can be seen on placeLabeland fitsInCanvas functions, around lines 9683 and 7669 of the final jit.js file, respectively.

I faced this problem too, while working with SpaceTree visualizations. This became an issue when we tried present a decent experience in mobile, where I could not find a way to put the canvas panning to work (so, when a node label partially disappeared, I had no way to select that node and centre the whole tree by consequence, to allow the further exploration of other nodes...).

What I did was change the function fitsInCanvas:

fitsInCanvas: function(pos, canvas, nodeW, nodeH) {
  var size = canvas.getSize();
  if(pos.x >= size.width || (pos.x + nodeW) < 0
     || pos.y >= size.height || pos.y + nodeH < 0) return false;
   return true;
}

And called it accordingly on placeLabel:

placeLabel: function(tag, node, controller) {
    ...
    ...
    ...
    var style = tag.style;
    style.left = labelPos.x + 'px';
    style.top  = labelPos.y + 'px';

    // Now passing on the node's width and heigh
    style.display = this.fitsInCanvas(labelPos, canvas, w, h)? '' : 'none'; 
    controller.onPlaceLabel(tag, node);
}

However, this is no solution. You now will probably see your labels falling off the canvas, in a weird effect, until the whole node disappears. And, obviously, I changed the source directly... a ticket should be filled on github.

EDIT:

Actually, it seems that I was working with an old version of the lib. The discussed behaviour changed to something similar to what I was describing. So, there is no need to change the code. Just download again your files. Specifically, the following link should give you these changes:

thyandrecardoso
  • 801
  • 1
  • 7
  • 12
0

There is a much simpler way to fix this although it might not be as elegant.

First, use the CSS 3 overflow attribute on the div associated with the Spacetree. For example, if the div in your HTML page that is being used by infovis is 

      <div id="infovis"> </div>

Then, you want some CSS that makes sure that your canvas does not allow overflow.

#infovis {
  position:relative;
  width:inherit;
  height:inherit;
  margin:auto;
  overflow:hidden;
}

Next, in your your space tree definition, you probably have a placeLabel : function defined. At the end of it, simply set the style.display = "";. This force the label to be shown if the node is placed onto the canvas. For example:

        onPlaceLabel: function(label, node, controllers){          
            //override label styles
            var style = label.style;  
            if (node.selected) {    
              style.color = '#ccc';
            }
            else {
              style.color = '#fff';
            }
            // show the label and let the canvas clip it
            style.display = ''; 
        }

Thus, you are displaying the text and turning it over to the browser to clip any part of the node or the label that extend off the canvas.

pnerger
  • 1
  • 1