javascript - 如何在D3 Treemap中显示 child 的名字

Question

我在 D3 中创建了一个具有父子关系的树形图。我根据 children 的 parent 给 children 上色。我想添加子名称作为每个子矩形的文本。

不确定如何访问二维数组中的子数据。

请在下面的 Github 链接中找到我的树形图的详细信息: http://bl.ocks.org/geetanjalirana/4cdcfc2887ed93907225

我需要添加子文本，如下例中突出显示的那样。

例如:-

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

如何访问粗体的子数据？

Answer 1

您的错误是您将 txt dom 附加到 rect DOM 中，这是错误的，也是文本不显示的原因。

在 NewFile.js 中，函数 display() 内，第 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);

你的函数文本如下:

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
}