javascript - Add number / text inside d3 path -

this question has answer here:

• draw text in d3 arc javascript 1 answer

how add text or numeric label inside arc, using d3?

i have paths drawn way want struggling text inside it?

i add value of "count" each path @ start of path

i have added have far below creating pen (see link below)

codepen 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++; } 

this answered.

you need assign id paths, , set xlink:href attribute in text nodes pointing corresponding path id.

var text = svg.append("text")     .attr("x", 6)     .attr("dy", 15);  text.append("textpath")     .attr("xlink:href","#yourpathid")     .text("my counter text"); 

this codepen changes reflect that.