How to display children name in D3 Treemap

Question

I have created a tree map in D3 having parent and child relationship. I have colored the children based on their parents. I want to add children name as the text for each of the child rectangles.

Not sure how to access the child data in the 2 dimensional array.

Please find the details of my treemap in Github link below: http://bl.ocks.org/geetanjalirana/4cdcfc2887ed93907225

I need to add the child text as highlighted in the example below.

For Instance:-

D = Children: Array[9]
    0: Object 1
    **Children: Array[10]**
      0: object 
      1: object 
      2: object
      ....
      9: object

How to access the children data which is in bold?

Cyril Cherian Cyril Cherian · Accepted Answer · 2015-09-13T07:47:42

Your mistake is that you are appending the txt dom inside rect DOM which is wrong and the reason why text is not displayed.

In NewFile.js, inside function display(), line no 167:

var k = g.selectAll(".child")
      .data(function(d) {
        return d.children || [d];
      })
      .enter();
   //append rectangle
    k.append("rect")
      .attr("class", "child")
      .call(rect);
    //append text
    k.append("text")
      .call(text);

And your function text like this:

function text(text) {
    text.attr("x", function(d) { return x(d.x) + 6; })
        .attr("y", function(d) { return y(d.y) + 6; })
        .attr("dy", "1.80em")
        .attr("stroke","black")
        .style("text-anchor", "center")
        .attr("class","textdiv")
        .text(function(d) { return d.name; });//to display the name
}

How to display children name in D3 Treemap

1 Answers