score:0

Accepted answer

...I have a suspicion that it's because each data set is an array of it's own.

Not at all. The data structure right now is actually the correct one: each donut has its own data as an inner array. Therefore, the same way you used arcData to draw the donuts, use it to print the labels:

var labels = svg.selectAll(null)
    .data(arcData)
    .enter()
    .append('text')
    .text(function(d){
        return d.value
    });

Here is your code with that change:

<!DOCTYPE html>
<meta charset="utf-8">

<head>
  <title>Donuts</title>
  <link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
</head>

<style>
  .container1 {
    width: 355px;
    position: absolute;
    flex-direction: column;
    font-size: 10px;
  }
  
  .container2 {
    width: 355px;
    position: absolute;
    flex-direction: column;
    transform: translate(400px, 0px);
  }
  
  .container3 {
    width: 355px;
    position: absolute;
    flex-direction: column;
    transform: translate(800px, 0px);
  }
</style>

<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <div class="container1" id="svg1"></div>
  <div class="container2" id="svg2"></div>
  <div class="container3" id="svg3"></div>
  <script>
    var employed1 = [{
      City: 'Bradford City',
      Percentage: 54.63
    }, {
      City: 'Leeds',
      Percentage: 62.19
    }, {
      City: 'Liverpool',
      Percentage: 55.62
    }, {
      City: 'Manchester',
      Percentage: 60.50
    }, {
      City: 'Sheffield',
      Percentage: 59.03
    }];

    var employed2 = [{
      City: 'Brighton',
      Percentage: 65.29
    }, {
      City: 'Bristol',
      Percentage: 66.72
    }, {
      City: 'Luton',
      Percentage: 62.87
    }, {
      City: 'Milton Keynes',
      Percentage: 67.80
    }, {
      City: 'Southampton',
      Percentage: 67.36,
    }];

    var unemployed1 = [{
      City: 'Bradford City',
      Percentage: 15.52
    }, {
      City: 'Leeds',
      Percentage: 6.96
    }, {
      City: 'Liverpool',
      Percentage: 9.76
    }, {
      City: 'Manchester',
      Percentage: 10.71
    }, {
      City: 'Sheffield',
      Percentage: 5.33
    }];

    var unemployed2 = [{
      City: 'Brighton',
      Percentage: 5.33
    }, {
      City: 'Bristol',
      Percentage: 5.51
    }, {
      City: 'Luton',
      Percentage: 8.50
    }, {
      City: 'Milton Keynes',
      Percentage: 5.17
    }, {
      City: 'Southampton',
      Percentage: 5.44
    }];

    var other1 = [{
      City: 'Bradford City',
      Percentage: 29.85
    }, {
      City: 'Leeds',
      Percentage: 30.85
    }, {
      City: 'Liverpool',
      Percentage: 34.62
    }, {
      City: 'Manchester',
      Percentage: 28.79
    }, {
      City: 'Sheffield',
      Percentage: 33.76
    }];

    var other2 = [{
      City: 'Brighton',
      Percentage: 29.38
    }, {
      City: 'Bristol',
      Percentage: 27.77
    }, {
      City: 'Luton',
      Percentage: 28.63
    }, {
      City: 'Milton Keynes',
      Percentage: 27.03
    }, {
      City: 'Southampton',
      Percentage: 27.30
    }];

    const NE = ["Bradford City", "Leeds", "Liverpool", "Manchester", "Sheffield"];

    var colorNE = d3.scaleOrdinal()
      .domain(NE)
      .range(["#A8A7A7", "#2F9599", "#E8175D", "#474747", "#CC527A"]);

    const SE = ["Brighton", "Bristol", "Luton", "Milton Keynes", "Southampton"];

    var colorSE = d3.scaleOrdinal()
      .domain(SE)
      .range(["#F8B195", "#F67280", "#C06C84", "#6C5B7B", "#355C7D"]);

    var mentalHealthAndAlcoholPie = d3.pie()
      .value(function(d) {
        return d.Percentage
      })
      .sort(function(a, b) {
        return a.City.localeCompare(b.City);
      });

    var arcGenerator = d3.arc()
      .innerRadius(100)
      .outerRadius(135)
      .padAngle(.02)
      .padRadius(50);

    draw("svg1", employed1, "Employed");
    draw("svg1", employed2, "Employed");
    draw("svg2", unemployed1, "Unemployed");
    draw("svg2", unemployed2, "Unemployed");
    draw("svg3", other1, "Other");
    draw("svg3", other2, "Other");

    function draw(selector, data, title) {

      var arcData = mentalHealthAndAlcoholPie(data);

      var svg = d3.select("#" + selector)
        .append("svg")
        .attr("width", 1000)
        .attr("height", 391)
        .append("g")
        .attr("transform", "translate(200, 240)");

      var slices = svg.selectAll(null)
        .data(arcData)
        .enter()
        .append('path')
        .attr("fill", function(d) {
          var result = null;

          if (NE.indexOf(d.data.City) >= 0) {
            result = colorNE(d.data.City);
          } else if (SE.indexOf(d.data.City) >= 0) {
            result = colorSE(d.data.City);
          } else {

            result = "white";
          }
          return result;
        })
        .style("stroke", "white")
        .attr('d', arcGenerator);

      var labels = svg.selectAll(null)
        .data(arcData)
        .enter()
        .append('text')
        .style("font-size", "10px")
        .attr("text-anchor", "middle")
        .style("text-shadow", "0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff")
        .attr("transform", function(d) {
          return "translate(" + arcGenerator.centroid(d) + ")";
        })
        .text(function(d) {
          return d.value
        });
        
      var titleText = svg.append("text")
        .attr("text-anchor", "middle")
        .style("font-size", "14px")
        .text(title);

    }
  </script>
</body>

</html>

PS: As I don't know what colours you'll have I'm printing the values in a black font with a white shadow... not the best design option, maybe.


Related Query

More Query from same tag