如何在樹形佈局中定位到節點中心的路徑

Question

我已經創建了集羣樹形佈局，並且想要將自定義節點樣式添加到選定節點。更確切地說，我將treemap添加爲節點。

我設法添加這些，但它們不位於節點的中心。 我嘗試了各種各樣的x，y屬性和翻譯，但我覺得我還沒有獲得svg。

的部分代碼，我添加節點是在這裏（爲的jsfiddle見下文）：

nodeEnter.each(function(d) { 
    if (d.status == "D") { 
     var treemap = d3.layout.treemap() 
     .size([20, 20]) 
     .sticky(true) 
     .value(function(d) { 
      return 1; 
     }); 

     var cell = d3.select(this) 
     .selectAll("g") 
     .data(function(d) { 
      return treemap.nodes(d.annotations); 
     }) 
     .enter().append("g") 
     .attr("class", "cell") 
     .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")"; 
     }); 

     cell.append("rect") 
     .attr("width", function(d) { 
      return d.dx; 
     }) 
     .attr("height", function(d) { 
      return d.dy; 
     }) 
     .style("fill", function(d) { 
      return d.children ? null : hex2rgb(color(d.parent.name)); 
     }); 
    } 
}) 

任何幫助，將不勝感激

這是我JSfiddle。

L.

Answer 1

假設您想讓連線連接到附加矩形的中間。我剛剛添加了第三個.attr到你的JSfiddle

cell.append("rect") 
     .attr("width", function(d) { 
      return d.dx; 
     }) 
     .attr("height", function(d) { 
      return d.dy; 
     }) 
     .attr("transform","translate(0,-10)") 
     .style("fill", function(d) { 
      return d.children ? null : hex2rgb(color(d.parent.name)); 
     });