Infovis：标签在部分节点上消失

Question

如果该节点部分显示在画布上，则最左侧节点上的标签会消失。 我该如何解决？

谢谢

Answer 1

如果InfoVis断言该标签将在画布上掉落（如果该标签将显示在节点上），它将尝试隐藏该标签。

它基本上计算画布的位置和尺寸，节点的位置和尺寸，并尝试查看标签的位置是否在画布之外。

这可以在placeLabel和fitsInCanvas函数上看到，分别在最终jit.js文件的9683和7669行周围。

在使用SpaceTree可视化文件时，我也遇到了这个问题。 当我们尝试在移动设备上提供不错的体验时，这成为一个问题，在那里我找不到一种方法来使画布平移工作（因此，当节点标签部分消失时，我无法选择该节点并将整个中心居中因此，可以进一步探索其他节点...）。

我所做的就是更改功能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;
}

并相应地在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);
}

但是，这不是解决方案。 现在，您可能会看到标签以奇怪的效果从画布上掉下来，直到整个节点消失。 而且，显然，我直接更改了源代码……应当在github上填写票证。

编辑：

实际上，似乎我正在使用旧版本的lib。 讨论的行为更改为类似于我所描述的行为。 因此，无需更改代码。 只需再次下载文件即可。 具体而言，以下链接应为您提供这些更改：

• https://github.com/philogb/jit/blob/3d51899b51a17fa630e1af64d5393def589f874e/Jit/jit.js

Answer 2

有一种更简单的方法可以解决此问题，尽管它可能不那么优雅。

首先，在与Spacetree关联的div上使用CSS 3溢出属性。 例如，如果infovis在HTML页面中使用的div是

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

然后，您需要一些CSS，以确保您的画布不允许溢出。

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

接下来，在您的空间树定义中，可能已经定义了placeLabel：函数。 最后，只需设置style.display =“”;。 如果将节点放置在画布上，这将强制显示标签。 例如：

        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 = ''; 
        }

因此，您正在显示文本并将其移到浏览器中，以裁剪节点或标签超出画布的任何部分。