Question

如何使用d3？

在弧内添加文本或数字标签

我按照我想要的方式绘制了路径，但我正在努力将文本放入其中？

我想添加＆＃34; count＆＃34;的值对于路径开头的每条路径

我已添加了目前为止的内容以及创建笔（参见下面的链接）

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，然后在文本节点中设置指向相应路径ID的xlink:href属性。

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路径中添加数字/文本

1 个答案: