D3樹形圖標頭

Question

我想在每個矩形的頂部添加標題，這些標題的父級名稱都是在這些矩形的頂部。我試圖按照這個例子https://bl.ocks.org/deenar/336efdeb97f1c79d4a6b，但老實說，不正確地理解它，因爲我還是D3的新手。

目前我已經添加下面添加一個頭，但似乎並沒有顯示任何東西：

var header = nodes.filter(function(d) { 
    return !d.children; 
    }); 

var headerCells = svg.selectAll("g.cell.header") 
    .data(header, function(d) { console.log("gf"+name); 
     return d.name; 
     }); 

var headerEnterTransition = headerCells.enter() 
     .append("g") 
     .attr("class", "cell header") 
     .on("click", function(d) { 
      zoom(d); 
     }); 
headerEnterTransition.append("rect") 
.attr("width", function(d) { 
    return Math.max(0.01, d.dx); 
}) 
.attr("height", headerHeight) 
     .style("fill", "red"); 
    headerEnterTransition.append('foreignObject') 
     .attr("class", "foreignObject") 
     .append("xhtml:body") 
     .attr("class", "labelbody") 
     .append("div") 
     .attr("class", "label"); 

我可以得到一個長方形頭顯示，如果我改變：

var header = nodes.filter(function(d) { 
     return d.children; 
     }); 

收件人：

var header = nodes.filter(function(d) { 
     return !d.children; 
     }); 

但是，這會導致treemap圖表消失，然後出現一個可點擊的矩形，然後擴展一次點擊。完整的代碼可以在這裏找到：https://jsfiddle.net/noobiecode/9ev9qjt3/33/

我希望我沒有困惑任何人，因爲我確實有這樣做的傾向。在任何情況下，這裏就是我想要實現：

我在那裏我完全摸不着頭腦，並希望如果有人應該擺脫對此事的一些光點。

Answer 1

我假設你只是想改變文本的位置從中間到頂部，並在文本點擊時具有縮放功能？ 看一看這裏：https://jsfiddle.net/q16m6wey/

parentCell.append("svg:text") 
    .attr("x", function(d) { 
    return d.dx/2; 
    }) 
    .attr("y", function(d) { 
    return 10; 
    }) 
    .attr("dy", ".35em") 
    .attr("text-anchor", "middle") 
    .text(function(d) { 
    return d.parent.name; 
    }) 
.style('cursor', 'pointer') 
    .style("opacity", function(d) { 
    console.log(this.getComputedTextLength()); 
    d.w = this.getComputedTextLength(); 
    return d.dx > d.w ? 1 : 0; 
    }) 
.on("click", function(d) { 
    console.log(d.parent); 
    return zoom(node == d.parent ? root : d.parent); 
    });