Infovis：標籤在部分節點上消失

Question

如果節點部分顯示在畫布上，最左側節點上的標籤將消失。 我該如何解決這個問題？

感謝

Answer 1

InfoVis試圖隱藏節點標籤時，它聲稱，該標籤將脫落的畫布，如果它的節點上顯示。

它基本上計算畫布位置和尺寸，節點位置和尺寸，並試圖看看標籤的位置在畫布上的。

由此可看出在placeLabel和fitsInCanvas功能，周圍線9683和最終jit.js文件，分別的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 = ''; 
     } 

因此，正在顯示的文本和將其移交給瀏覽器夾延伸了畫布的節點或標籤的任何部分。