d3.js：如何在甜甜圈图表的标签下方添加值

我是d3.js新手，到目前为止，我所取得的成就是，使用教程和视频

现在，我尝试在标签文本下方添加

dataset.value

，如图所示

---

我如何做到这一点

您需要这样做：

    var text = svg.select(".labels").selectAll("text")
        .data(pie(data), key);
  //make a group  
    var textg = text.enter().append("g");
  //to the group append text for label
    textg
        .append("text")
        .attr("dy", ".35em")
        .text(function(d) {
            return d.data.label;
        });
  //to the group append text for value  
    textg.append("text")
      .attr("dy", "1.95em")
      .text(function(d) { return d.data.value; });  

---

工作代码

您可以使用以下代码更新附加文本代码

text.enter()
 .append("text")
 .attr("dy", ".35em")
 .append('svg:tspan')
 .attr('x', 0)
 .attr('dy', 0)
 .text(function(d) { return d.data.label; })
 .append('svg:tspan')
 .attr('x', 0)
 .attr('dy', 20)
 .text(function(d) { return d.data.value; });

将两个

tspan

追加到

text

元素

---

此处更新

你们两人都给出了正确答案，很遗憾我只有一个正确答案。np您选择的答案肯定是更好的：）

text.enter()
 .append("text")
 .attr("dy", ".35em")
 .append('svg:tspan')
 .attr('x', 0)
 .attr('dy', 0)
 .text(function(d) { return d.data.label; })
 .append('svg:tspan')
 .attr('x', 0)
 .attr('dy', 20)
 .text(function(d) { return d.data.value; });