title: Prevent text from rotating on the TextPath
body: <p>I'm drawing a roulette with d3.js and I need to prevent rotating of upside down numbers in the fields - so the text labels should stay like cabins on Ferris Wheel - <a href="https://prnt.sc/k0oz87" rel="nofollow noreferrer">example</a></p>
  
  <p>My fiddle - <strong><a href="http://jsfiddle.net/xLc59v3y/4/" rel="nofollow noreferrer">fiddle</a></strong></p>
  
  <p>that's the extract to add text</p>
  
  <pre><code>     node.append("text")
      .attr("x", 0)
      .attr("dy", 12)
      .attr("fill", "#ffffff")
      .style("font-size", "10px")
      .attr("text-anchor", "middle")
      .append("textPath")
      .attr("xlink:href", function(d, i) { return "#roulette_field_" + i })
      .text(function(d) { return d[0] })
      .attr("startOffset", 9);
  </code></pre>
  
  <p>Is it possible to use textPath element only for anchoring text right to its cell, but not force it to follow the curved line of the field? </p>
  
  <p>If not, how to achieve the right placement in the according cell without rotation? </p>
  
  <p>Also I need to place text in the middle (horizontal) of the cell, but text-anchor middle not working at all, while <code>startOffset = 9</code> is going wrong in Internet Explorer;</p>