2017-05-28 352 views
0

我創建了this fiddle用於使用d3js進行簡單的樹可視化。它工作正常。但是,當樹變得非常大時,我遇到了問題,而節點旁邊的文本往往會重疊。所以我需要設置一個垂直距離。我怎樣才能做到這一點?下圖顯示了我的意思:d3js樹佈局文本之間的垂直距離重疊

enter image description here

我試圖與separation功能添加它,但是這是我想只有水平改變它。

var tree = d3.layout.tree().nodeSize([1, nodeHeight]) 
     .separation(function(a, b) { 
      var height = a.height + b.width, 
       distance = height/2 + 50; 
       return distance; 
     }), 
nodes = tree.nodes(data), 
links = tree.links(nodes); 
+0

可能重複https://stackoverflow.com/questions/13032722/d3-tree-vertical-separation,你能同時提供導致該錯誤在你的jsfiddle樹數據的例子,請 –

回答

0

我認爲兄弟姐妹節點不重疊,但表兄弟。要處理您的問題,您需要了解tree.separation()的工作原理。

在我的一個項目中。我做到了。

var tree = d3.layout.tree(); 
tree.nodeSize(/*some stuff here*/) 
.separation(function(a, b) { 
     return (a.parent == b.parent ? 1 : 1.5); 
    }); 

回報(a.parent == b.parent 1:1.5),基本上是說,如果 節點具有相同的父母或者是兄弟,然後將它們之間的分離是沒有的,如果他們不具備相同的父母,他們被認爲是堂兄弟,因此它們之間的計算距離是您節點的高度(您在nodeSize中定義的)的50%。

我不擅長解釋像專業人士這樣的東西,但絕對檢查分離方法,並記住它處理表兄弟節點之間的距離。

enter image description here