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

Question

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

我已经按照我想要的方式绘制了路径，但是我很难将文本放入其中？

我想在路径的开头为每个路径添加 "count" 的值

我已经在下方添加了目前已有的内容并创建了一支笔（请参阅下方的 link）

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

这已经是 answered。

您需要为您的路径分配一个 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");

This is the codepen 进行一些更改以反映这一点。

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

Add number / text inside d3 path

javascript

label

path

line

d3.js