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