D3 Treemap-Header

Question

Ich versuche, Kopfzeilen an der Spitze jedes Rechtecks ​​hinzuzufügen, die den Namen des Elternteils in ihnen haben. Ich versuche, diesem Beispiel zu folgen https://bl.ocks.org/deenar/336efdeb97f1c79d4a6b, aber ehrlich gesagt nicht richtig verstehen, wie ich noch neu in D3 bin.

Derzeit Ich habe das addierte nach einem Header hinzufügen, aber scheint nicht, etwas zu zeigen:

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

ich ein Rechteck-Header erhalten, um zu zeigen, wenn ich ändern:

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

An:

Aber das Ergebnis in der Treemap-Diagramm verschwinden und ein klickbares Rechteck, die dann expandiert einmal geklickt. Der vollständige Code könnte hier gefunden werden: https://jsfiddle.net/noobiecode/9ev9qjt3/33/

Ich hoffe, ich habe niemanden verwirrt, da ich eine Tendenz dazu habe. Auf jeden Fall ist hier, was ich versuche zu erreichen:

ich an dem Punkt bin, wo ich völlig verwirrt bin und hatte gehofft, dass, wenn jemand etwas Licht in diese Angelegenheit werfen sollte.

Answer 1

Ich nehme an, Sie möchten nur die Position des Textes von Mitte nach oben ändern und haben Zoom-Funktionalität auf einen Klick auf Text? Werfen Sie einen Blick hier: 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); 
    });