D3 Treemapヘッダー

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; 
     }); 

To：

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

しかし、この結果、ツリーマップのグラフが消え、クリック可能な矩形一度クリックすると拡大されます。完全なコードはここにあります：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); 
    });