Javascript 在d3.js的树状图中显示节点内的文本

我在d3.js中使用简单的垂直树形图，其中我需要显示圆圈内每个节点的名称和计数。我正在处理的链接。 现在，名称显示在圆圈外。我想将节点的名称和计数包含在一个圆中

var treeData = {
  name: "Top Level",
  children: [
    {
      name: "Level 2: A",
      count: 600,
      children: [
        { name: "Son of A", count: 200 },
        { name: "Daughter of A", count: 300 }
      ]
    },
    { name: "Level 2: B", count: 100 }
  ]
};
var margin = { top: 40, right: 90, bottom: 50, left: 90 },
      width = 660 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    // declares a tree layout and assigns the size
    var treemap = d3.tree().size([width, height]);

    //  assigns the data to a hierarchy using parent-child relationships
    var nodes = d3.hierarchy(treeData);

    // maps the node data to the tree layout
    nodes = treemap(nodes);

    // append the svg obgect to the body of the page
    // appends a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom),
      g = svg
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // adds the links between the nodes
    var link = g
      .selectAll(".link")
      .data(nodes.descendants().slice(1))
      .enter()
      .append("path")
      .attr("class", "link")
      .attr("d", function(d) {
        return (
          "M" +
          d.x +
          "," +
          d.y +
          "C" +
          d.x +
          "," +
          (d.y + d.parent.y) / 2 +
          " " +
          d.parent.x +
          "," +
          (d.y + d.parent.y) / 2 +
          " " +
          d.parent.x +
          "," +
          d.parent.y
        );
      });

    // adds each node as a group
    var node = g
      .selectAll(".node")
      .data(nodes.descendants())
      .enter()
      .append("g")
      .attr("class", function(d) {
        return "node" + (d.children ? " node--internal" : " node--leaf");
      })
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
      })
      .on("mouseover", function(d) {
        var g = d3.select(this); // The node
        // The class is used to remove the additional text later
        var info = g
          .append("text")
          .classed("info", true)
          .attr("x", 20)
          .attr("y", 10)
          .text("More info");
      })
      .on("mouseout", function() {
        // Remove the info text on mouse out.
        d3.select(this)
          .select("text.info")
          .remove();
      });

    // adds the circle to the node
    node.append("circle").attr("r", 10);

    // adds the text to the node
    node
      .append("text")
      .attr("dy", ".35em")
      .attr("y", function(d) {
        return d.children ? -20 : 20;
      })
      .style("text-anchor", "middle")
      .text(function(d) {
        return d.data.name;
      });

---

我对现有代码进行了必要的更改，以显示圆内每个节点的名称和计数

.节点{
光标：指针；
}
.工具提示{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；
/*如果要在可悬停文本下添加点*/
}
路径链接{
填充：rgb（133、129、196）；
冲程：#333；
笔划宽度：1.5px；
}
/*工具提示文本*/
.tooltip.tooltiptext{
可见性：隐藏；
宽度：120px；
背景色：黑色；
颜色：#fff；
文本对齐：居中；
填充：5px0；
边界半径：6px；
/*定位工具提示文本-请参见下面的示例*/
位置：绝对位置；
z指数：1；
}
/*将鼠标悬停在工具提示容器上时显示工具提示文本*/
.tooltip:悬停.tooltiptext{
能见度：可见；
}
.节点圆{
填充：#fff；
笔画：钢蓝；
笔画宽度：3px；
}
.节点文本{
字体：12px无衬线；
文本溢出：省略号；
空白：nowrap；
}
.node—内部文本{
文本阴影：0 1px0#fff，0-1px0#fff，1px0#fff，-1px0#fff；
}
.链接{
填充：无；
冲程：#ccc；
笔画宽度：2px；
}
变量treeData={
名称：“顶级”，
计数：1200，
儿童：[
{
名称：“2级：A”，
计数：600，
儿童：[
{姓名：“一个儿子”，计数：200}，
{姓名：“A的女儿”，计数：300}
]
},
{名称：“2级：B”，计数：100}
]
};
var margin={顶部：50，右侧：90，底部：50，左侧：90}，
宽度=660-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
//声明树布局并指定大小
var treemap=d3.tree（）.size（[width，height]）；
//使用父子关系将数据指定给层次结构
var节点=d3.层次结构（treeData）；
//将节点数据映射到树布局
节点=树映射（节点）；
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3
.选择（“正文”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部），
g=svg
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//添加节点之间的链接
var-link=g
.selectAll（“.link”）
.data（节点.子体（）.slice（1））
.输入（）
.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，函数（d）{
返回(
“M”+
d、 x+
"," +
d、 y+
“C”+
d、 x+
"," +
（d.y+d.parent.y）/2+
" " +
d、 父.x+
"," +
（d.y+d.parent.y）/2+
" " +
d、 父.x+
"," +
d、 家长
);
});
//将每个节点添加为一个组
var节点=g
.selectAll（“.node”）
.data（节点.子体（））
.输入（）
.附加（“g”）
.attr（“类”，函数（d）{
返回“node”+（d.children？“node--internal”：“node--leaf”）；
})
.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
})
.on（“鼠标悬停”，功能（d）{
var g=d3。选择（此）；//节点
//该类用于以后删除附加文本
var info=g
.append（“文本”）
.classed（“信息”，真实）
.attr（“x”，20）
.attr（“y”，10）
.文本（“更多信息”）；
})
.on（“mouseout”，函数（）{
//将鼠标移出时的信息文本删除。
d3.选择（本）
.选择（“text.info”）
.remove（）；
});
//将圆添加到节点
node.append（“圆圈”）.attr（“r”，45）；
//将文本添加到节点
节点
.append（“文本”）
.attr（“dy”，“.35em”）
.attr（“y”，函数（d）{
//返回d.children？-20:20；
返回-10；
})
.style（“文本锚定”、“中间”）
.文本（功能（d）{
返回d.data.name；
});
节点
.append（“文本”）
.attr（“dy”，“.35em”）
.attr（“y”，函数（d）{
返回10；
})
.style（“文本锚定”、“中间”）
.文本（功能（d）{
返回d.data.count；
});