score:3

Accepted answer

these are the problems:

  1. you're setting the start angle and the end angle in your arc generator:

    var arcshape = d3.svg.arc()
        .innerradius(425)
        .outerradius(575)
        .startangle(0)
        .endangle(2*math.pi);
    

    drop that:

    var arcshape = d3.svg.arc()
        .innerradius(425)
        .outerradius(575);
    
  2. to access the data of your slices, you have to use d.data:

    .style("fill", function(d) {
        return d.data.tcolor
    });
    
  3. the value really doesn't matter, because all the slices have the same length. you can return any number:

    .value(function(d) {
        return 1
    });
    

also, use .style("text-anchor", "middle") for the texts.

here is your code with those changes:

var w = 500;
 var h = 500;

 var svgbody = d3.select("body").append("svg")
   .attr("width", w)
   .attr("height", h);

 //doing the connection of tags to annulus
 var tags = [{
   tag: "translation",
   authors: "smith",
   tcolor: "blue"
 }, {
   tag: "code",
   authors: "finch",
   tcolor: "green"
 }, {
   tag: "samples",
   authors: "chang",
   tcolor: "red"
 }, {
   tag: "nodes",
   authors: "thomas",
   tcolor: "yellow"
 }];


 //shape of the outer ring (tags)
 var arcgroup = svgbody.append("g") //.data(tags)
   .attr("transform", "translate(250,250)");

 var arcshape = d3.svg.arc()
   .innerradius(200)
   .outerradius(250);

 var pie = d3.layout.pie()
   .sort(null)
   .value(function(d) {
     return 1
   });

 var ga = arcgroup.selectall(".arcstyle")
   .data(pie(tags))
   .enter().append("g")
   .attr("class", "arc");

 ga.append("path")
   .attr("d", arcshape)
   .style("fill", function(d) {
     return d.data.tcolor
   });

 ga.append("text")
   .attr("transform", function(d) {
     return "translate(" + arcshape.centroid(d) + ")"
   })
   .attr("dy", ".35em")
   .style("text-anchor", "middle")
   .style('fill', 'white')
   .text(function(d) {
     return d.data.tag
   });
<script src="https://d3js.org/d3.v3.min.js"></script>


Related Query

More Query from same tag