D3.js placing text over arcs in a donut chart

Question

I am trying to place text over a donut chart with inner rings created with D3. The plunker code can be accessed here: plunker

For placing the text over the arcs, I want to access the donutData array and place the values over each ring of the chart.

gs.append("text")
.attr("transform", function(d){
    return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d,i){
    return donutData[i];
});

Since the donutData array stores the values of "actual" and "predicted" which it uses for creating the donut chart, I want those values to be placed over each of the arcs in the chart.

Answer 1

You will have to group the arc paths and labels.

var gs = chart1.selectAll("g").data(donutData).enter().append("g");

var groups = gs.selectAll('.arc') //Created groups 
    .data(function(d) {
        return pie(d);
    })
    .enter().append("g").classed("arc", true);

path = groups.append('path') //Append paths
    .attr('d', function(d, i, j) {
        return arc.innerRadius(30 + donutWidth * j).outerRadius(donutWidth * (j + 1))(d);
    })
    .attr('fill', function(d, i) {
        return color(i);
    })
    .on("mouseover", function(d) {
        d3.select(this).select("path").transition()
            .duration(200)
            .attr("d", arcOver);
    })
    .on("mouseout", function(d) {
        d3.select(this).select("path").transition()
            .duration(100)
            .attr("d", arc);
    });

groups.append("text") //Add labels
    .attr("transform", function(d, i, j) {
        var arc1 = arc.innerRadius(30 + donutWidth * j).outerRadius(donutWidth * (j + 1));
        return "translate(" + arc1.centroid(d) + ")";
    })
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d, i) {
        return d.data
    });

// Code goes here
(function() {

  var margin = {
      top: 30,
      right: 30,
      bottom: 70,
      left: 40
    },
    width = 580 - margin.left - margin.right,
    height = 560 - margin.top - margin.bottom,
    donutWidth = 100
  inner = 70;
  radius = Math.min(width, height) / 2;

  var color = d3.scale.category10();

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

  var arc = d3.svg.arc();
  //.innerRadius(radius - donutWidth)
  //.outerRadius(radius - 50);

  var arcOver = d3.svg.arc()
    .innerRadius(inner + 5)
    .outerRadius(radius + 5);

  var chart1 = d3.select("#chartArea1").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


  /*	d3.csv("data.csv", function(error, data) {
			if (error) throw error;*/

  var data = [{
    "Class": "Class A",
    "Actual_Class": 495,
    "Predicted_Class": 495,
    "Accuracy": 100
  }, {
    "Class": "Class B",
    "Actual_Class": 495,
    "Predicted_Class": 492,
    "Accuracy": 99
  }, {
    "Class": "Class C",
    "Actual_Class": 495,
    "Predicted_Class": 495,
    "Accuracy": 100
  }, {
    "Class": "Class D",
    "Actual_Class": 495,
    "Predicted_Class": 495,
    "Accuracy": 100
  }, {
    "Class": "Class E",
    "Actual_Class": 495,
    "Predicted_Class": 495,
    "Accuracy": 100
  }];

  var donutData = new Array,
    actualValues = new Array,
    predValues = new Array;

  data.forEach(function(d) {
    actualValues.push(d.Actual_Class);
    predValues.push(d.Predicted_Class);
  });

  console.log(data);

  donutData.push(actualValues);
  donutData.push(predValues);

  console.log(donutData);

  var gs = chart1.selectAll("g").data(donutData).enter().append("g");

  var groups = gs.selectAll('.arc')
    .data(function(d) {
      return pie(d);
    })
    .enter().append("g").classed("arc", true);

  path = groups.append('path')
    .attr('d', function(d, i, j) {
      return arc.innerRadius(30 + donutWidth * j).outerRadius(donutWidth * (j + 1))(d);
    })
    .attr('fill', function(d, i) {
      return color(i);
    })
    .on("mouseover", function(d) {
      d3.select(this).select("path").transition()
        .duration(200)
        .attr("d", arcOver);
    })
    .on("mouseout", function(d) {
      d3.select(this).select("path").transition()
        .duration(100)
        .attr("d", arc);
    });

  groups.append("text")
    .attr("transform", function(d, i, j) {
      var arc1 = arc.innerRadius(30 + donutWidth * j).outerRadius(donutWidth * (j + 1));
      return "translate(" + arc1.centroid(d) + ")";
    })
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d, i) {
      return d.data
    });

  var legend = chart1.selectAll(".legend")
    .data(color.domain().slice()) //.reverse())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) {
      return "translate(0," + i * 20 + ")";
    });

  legend.append("rect")
    .attr("x", 190)
    .attr("y", -(margin.top) * 7 - 8)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);

  legend.append("text")
    .attr("x", margin.right * 7)
    .attr("y", -(margin.top) * 7)
    .attr("dy", ".35em")
    .text(function(d, i) {
      return data[i].Class;
    });

  //	});

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chartArea1"></div>

Answer 2

To add label to the center of the arc you need to add the label to the centroid.

gs.selectAll('text').data(function(d) {
    return pie(d);
  })
  .enter().append("text")
  .attr("transform", function(d, i, j) {//calculating the d as done in the path
    k = arc.innerRadius(30 + donutWidth * j).outerRadius(donutWidth * (j + 1))(d);;
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("dy", ".35em")
  .style("text-anchor", "middle")
  .text(function(d) {
    return d.data;
  });

Working code here

Hope this helps!