JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
  <div class="wrapper" id="wheel"></div>    
</div>

JavaScript

var width = 300;
  r = width / 2,
      labelr = r + 20
  outerRadius = 150,
      innerRadius = outerRadius - 30;; // radius for label anchor

  var mySvg = d3.select("#wheel").append("svg")
      .attr("width", 500)
      .attr("height", 500);

  var myGroup = mySvg.append("g")
      .attr("transform", "translate(200,200)");

  var arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius);

  var arc1 = d3.svg.arc()
      .innerRadius(innerRadius - 30)
      .outerRadius(outerRadius - 30);

  var numberOfSegments = 12;
  var radians;
  var degrees;

  // function render (arc) {
  radians = (Math.PI * 2) / numberOfSegments;
  degrees = 360 / numberOfSegments;

  arc.startAngle(function(d, i) {
      return radians * i
  });
  arc.endAngle(function(d, i) {
      return radians * (i + 1)
  });

  var g = myGroup.selectAll("g").data(d3.range(numberOfSegments));

  g.enter().append("g").attr("class", "arc");

  g.append("path")
      .attr("class", "seg")
      .attr("d", arc)
      .attr("fill", function(d, i) {
          return "hsl(" + (i * degrees) + ",100%,50%)";
      });

  g.append('text').attr("transform", function(d, i) {
          var c = arc.centroid(d, i),
              x = c[0],
              y = c[1],

              // pythagorean theorem for hypotenuse
              h = Math.sqrt(x * x + y * y);
          console.log(c);
          return "translate(" + (x / h * labelr) + ',' + (y / h * labelr) + ")";
      })
      .attr("dy", ".35em")
      .attr("dx", "-0.9em")
      .attr("text-anchor", function(d) {
          // are we past the center?
          return (d.endAngle + d.startAngle) / 2 > Math.PI ?
              "end" : "start";
      })
      .text(function(d, i) {
          return i * degrees + "°";
      });

  g.exit().remove();
  // }

  // render(arc);

  var margin = {
          top: 10,
          right: 50,
          bottom: 10,
          left: 50
      },
      width = 300 - margin.left - margin.right, //controller
...