javascript - D3 Treemap headers -

i'm trying add headers @ top of each rectangle have name of parent in them. i'm trying follow example https://bl.ocks.org/deenar/336efdeb97f1c79d4a6b don't understand i'm still new d3.

currently i've added following add header doesn't seem show anything:

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

i can rectangle header show if change:

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

to:

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

but results in treemap chart disappearing , clickable rectangle expands once clicked on. full code found here: https://jsfiddle.net/noobiecode/9ev9qjt3/33/

i'm hoping haven't confused have tendency of doing so. in case, here's i'm trying achieve:

i'm @ point i'm puzzled , hoping if should shed light on matter.

i assuming want change position of text middle top , have zoom functionality on click of text? have here: 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);   });