title: How to right/end align text along an textPath inside an arc using d3.js?
body: <p>Here's the fiddle: <a href="http://jsfiddle.net/DevChefOwen/CZ6Dp/" rel="noreferrer">http://jsfiddle.net/DevChefOwen/CZ6Dp/</a></p>
  
  <pre><code>var text = g.append("text")
              .style("font-size",30)
              .style("fill","#000")
              .attr("dy",0)
              .append("textPath")
              .attr("xlink:href","#yyy")
              .style("text-anchor","left") // using "end", the entire text disappears
              .text("some text");
  </code></pre>
  
  <p>I've tried a number of different things to no avail. The left align is the easy part. If you did a middle, though, you see only "text" instead of "some text", implying that "some" is just hidden because it went "out of span" for the given arc.</p>
  
  <p>If, however, I added:</p>
  
  <pre><code>        .attr("startOffset","39%")
  </code></pre>
  
  <p>(as in here: <a href="http://jsfiddle.net/DevChefOwen/2H99c/" rel="noreferrer">http://jsfiddle.net/DevChefOwen/2H99c/</a>)</p>
  
  <p>It would look right aligned, but outside of programmatically trying to get the width/height of the text element and look for sharp changes in width/height (which seems wrong and likely error-prone), I can't seem to find a way to right align the text.</p>
  
  <p>I've also tried using an SVG path (essentially a curved arc line) and the same disappearing act happens with the text when "text-anchor" is set to "left".</p>
  
  <p>Thanks ahead for your time!</p>