避免在D3.js中重疊子節點

我正在構建一個樹形結構，顯示使用D3.js的Facebook用戶和他/她的Facebook朋友。根是用戶，而子節點是朋友。我在我的用戶界面中有一個固定的寬度，問題是子節點將互相重疊。避免在D3.js中重疊子節點

   var nodes = tree.nodes(root).reverse(), 
       links = tree.links(nodes); 

       nodes.forEach(function(d) { d.y = d.depth * 130; }); 

       var node = svg.selectAll("g.node") 
       .data(nodes, function(d) { return d.id || (d.id = ++i); }); 

       var nodeEnter = node.enter().append("g") 
       .attr("class", "node") 
       .attr("value", function(d){ 
       return d.id; }) 
       .attr("transform", function(d) { 
       return "translate(" + d.x + "," + d.y + ")"; }); 

       var defs = node.append("defs").attr("id", "imgdefs"); 

       var imgPattern = defs.append("pattern") 
        .attr("id", "img") 
        .attr("height", 50) 
        .attr("width", 50) 
        .attr("x", "0") 
        .attr("y", "0"); 


       imgPattern.append("image") 
        .attr("height", 60) 
        .attr("width", 60) 
        .attr("xlink:href", function(d) { return d.img; }); 

       nodeEnter.append("circle") 
        .attr("r", 30) 
        .style("stroke","white") 
        .style("stroke-width", 4) 
        .attr("fill", "url(#img)");

我想顯示10個朋友每行/深度爲子節點。請任何幫助或建議。謝謝！

這裏是我的jsfiddle：要做到這一點是設置tree layout的nodeSize和separation性能CODE HERE

來源

2014-09-23 Kentarou

的一種方式。下面是摘錄：

var tree = d3.layout.tree() 
    //.size([height, width]) 
    .nodeSize([30,]) 
    .separation(function separation(a, b) { 
     return a.parent == b.parent ? 2 : 1; 
    });

我設置nodeSize屬性等於圓的半徑的x尺寸。

此外，在g的變化變換需要重新定位圖表：

.attr("transform", "translate(" + (margin.left + width/2) + "," + margin.top + ")");

您可以安全地忽略size財產（見文檔在上面的鏈接，這SO answer）。

這是一個FIDDLE的變化。我在不同的深度添加了另一行圓圈，以檢查解決方案是否足夠健壯。我認爲這應該讓你去。

來源

2014-09-23 09:05:08 FernOfTheAndes

非常感謝您的回覆......我想問一下如何更改最後一行（3張圖片）的鏈接來連接父節點？ – Kentarou 2014-09-24 02:39:53

@Kentarou YW。問題的最初意圖是解決重疊問題。如果答案解決了這個問題，你應該接受答案。至於你評論中的問題，在最後一行中，你是指我添加到原始數據中的那一行？ – FernOfTheAndes 2014-09-24 10:51:51

避免在D3.js中重疊子節點

回答

相關問題