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 overflow属性。例如，如果infovis正在使用的HTML页面中的div是

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

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

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

接下来，在您的空间树定义中，您可能已定义了placeLabel：function。最后，只需设置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 = ''; 
        }

因此，您正在显示文本并将其转到浏览器以剪切节点的任何部分或从画布延伸的标签。

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

2 个答案: