title: Label over arc paths bent
body: <p>I am trying to add labels properly over arcs. Because the arc angles are so small, the labels can't fit over the arcs and "bend". How can i make the labels fit over the arcs keeping the same font size, same radius and same number of arcs?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;style&gt;
      .layer_1 {
        stroke: none;
      }
      
      .layer_o {
        stroke: none;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
    &lt;script&gt;
  
      //build test data
      var dict = []; // create an empty array
  
      var angle = 0;
      var nb_arcs = 255;
      var max_radius = 200;
      var colorScale = d3.scaleOrdinal(d3["schemeCategory10"])
  
      for (var i = 0; i &lt; nb_arcs; i++) {
  
        var outer_radius_1 = Math.random() * max_radius;
  
        dict.push({
          id: i,
          layer: 1,
          inner_radius: 0,
          outer_radius: outer_radius_1,
          start_angle: angle,
          end_angle: angle + 2 * Math.PI / nb_arcs
        });
  
        dict.push({
          id: nb_arcs + i,
          layer: 2,
          inner_radius: outer_radius_1,
          outer_radius: max_radius,
          end_angle: 2,
          start_angle: angle,
          end_angle: angle + 2 * Math.PI / nb_arcs
        });
  
        angle = angle + 2 * Math.PI / nb_arcs;
      }
  
      var svg = d3.select("body").append("svg")
        .attr("width", 960)
        .attr("height", 500)
        .append("g")
        .attr("transform", "translate(480,250)");
  
      var g = svg.selectAll("g").enter().append("g");
  
      var path = svg.selectAll("path")
        .data(dict)
        .enter().append("path")
        .attr("id", function(d) {
          return d.id;
        })
        .attr("class", function(d) {
          if (d.layer == 1) {
            return "layer_1";
          } else {
            return "layer_o";
          }
        })
        .attr("d", d3.arc()
          .innerRadius(function(d) {
            return d.inner_radius;
          })
          .outerRadius(function(d) {
            return d.outer_radius;
          })
          .startAngle(function(d) {
            return d.start_angle;
          })
          .endAngle(function(d) {
            return d.end_angle;
          }))
        .attr("fill", function(d) {
          return colorScale(d.layer);
        })
        .style('stroke', function(d) {
          return colorScale(d.layer);
        })
        .style('stroke-width', '0.3');
  
      svg.selectAll("text")
        .data(dict)
        .enter()
        .append("text")
        .attr('dy', function(d) {
          if (d.id % 2 == 0) {
            return -13;
          } else {
            return -5;
          }
        })
        .attr("class", "labelText")
        .append("textPath") //append a textPath to the text element
        .attr("xlink:href", function(d) {
          return "#" + d.id;
        })
        .style("font-size", "5px")
        .text(function(d) {
          if (d.layer == 2) {
            return "#" + d.id;
          } else {
            return "";
          }
        })
        .style("text-anchor", "middle")
        .attr('startOffset', function(d) {
          if (d.id % 2 == 0) {
            return 3;
          } else {
            return 0;
          }
        })
        .attr("fill", "black");
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>