如何在 D3 树图中显示 children 名称

Question

我在 D3 中创建了一个具有 parent 和 child 关系的树图。我根据他们的 parents 给 children 上色了。我想添加 children name 作为每个 child 矩形的文本。

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

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

我需要添加下面示例中突出显示的 child 文本。

例如：-

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

如何访问加粗的children数据？

Answer 1

你的错误是你在 rect DOM 中附加了 txt 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
}

如何在 D3 树图中显示 children 名称

How to display children name in D3 Treemap

javascript

treemap

d3.js