在d3路径中添加数字/文字

Question

如何使用d3在圆弧内添加文本或数​​字标签？

我已经按照自己想要的方式绘制了路径，但正在努力获取其中的文字？

我想在路径的开头为每个路径添加“计数”的值

我已经添加了下面的内容以及创建了一支笔（请参见下面的链接）

CODEPEN链接

var width = 300, height = 300;
var twoPi = 2 * Math.PI; // Full circle
var formatPercent = d3.format(".0%");

var data = [
  { "count" : 1000 },
  { "count" : 800 },
  { "count" : 800 },
  { "count" : 700 }
];

var max = d3.max(data, function(d) { 
  return +d.count;
});

var percent = d3.max(data, function(d) { 
  return +d.count / 10;
});

var radius = .25;
var gap = 22;
var maxCount = max + percent;

var cx = width / 2.5;
var cy = height / 2.5;

var svg = d3.select("body").append("svg")
        .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 10 + "," + height / 10 + ")");

    svg.selectAll("path")
        .data(data).enter()
      .append("path")
        .each(drawArc);

function drawArc(d, i) {
  var ratio = d.count / maxCount;
  var arc = d3.svg.arc()
        .startAngle(0)
        .endAngle(twoPi * ratio)
        .innerRadius(0 + gap * radius)
        .outerRadius(20 + gap * radius);

  d3.select(this)
        .attr("transform", "translate(" + cx + "," + cy + ")")
        .attr("d", arc);
        radius++;
}

Answer 1

已经回答了。

您需要为路径分配一个ID，然后xlink:href在文本节点中设置属性以指向相应的路径ID。

var text = svg.append("text")
    .attr("x", 6)
    .attr("dy", 15);

text.append("textPath")
    .attr("xlink:href","#yourPathId")
    .text("My counter text");

这是Codepen，并进行了一些更改以反映这一点。