Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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. </p> <p>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.</p> <p>This can be seen on <code>placeLabel</code>and <code>fitsInCanvas</code> functions, around lines 9683 and 7669 of the final <strong>jit.js</strong> file, respectively.</p> <p>I faced this problem too, while working with <strong>SpaceTree</strong> 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...).</p> <p>What I did was change the function <code>fitsInCanvas</code>:</p> <pre><code>fitsInCanvas: function(pos, canvas, nodeW, nodeH) { var size = canvas.getSize(); if(pos.x &gt;= size.width || (pos.x + nodeW) &lt; 0 || pos.y &gt;= size.height || pos.y + nodeH &lt; 0) return false; return true; } </code></pre> <p>And called it accordingly on <code>placeLabel</code>:</p> <pre><code>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); } </code></pre> <p>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 <a href="https://github.com/philogb/jit/issues" rel="nofollow">github</a>.</p> <p><strong>EDIT:</strong></p> <p>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:</p> <ul> <li><a href="https://github.com/philogb/jit/blob/3d51899b51a17fa630e1af64d5393def589f874e/Jit/jit.js" rel="nofollow">https://github.com/philogb/jit/blob/3d51899b51a17fa630e1af64d5393def589f874e/Jit/jit.js</a></li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload