title: D3: pie labels with "horizontal ending"-lines without overlapping
body: <p>I really like David Buezas pie chart with lines, <strong>especially those horizontal lines</strong>, as they improve readability: <a href="http://bl.ocks.org/dbuezas/9306799" rel="nofollow">http://bl.ocks.org/dbuezas/9306799</a>. But labels overlap there, lines potentially too.</p>
  
  <p>Stumbled upon <a href="http://blog.safaribooksonline.com/2014/03/11/solving-d3-label-placement-constraint-relaxing/" rel="nofollow">http://blog.safaribooksonline.com/2014/03/11/solving-d3-label-placement-constraint-relaxing/</a> (contains a lot of fiddles, sorry, not enough reputation for posting link), which explains how to avoid overlapping. Tried to adapt this example to label lines with an "horizontal ending", basically by replacing <code>&lt;line&gt;</code> with <code>&lt;polyline&gt;</code>, but failed. </p>
  
  <ul>
  <li><p>It appears as <code>&lt;line&gt;</code> would have a different output than <code>&lt;polyline&gt;</code>, because I copied all the attributes, but it's drawn differently (pretty sure I didn't mess up)</p></li>
  <li><p>I obviously don't get how the lines are sliced to the text in Bueza's example. Thought I could just do a workaround by:</p>
  
  <ul>
  <li>replacing <code>&lt;line&gt;</code> with <code>&lt;polyline&gt;</code></li>
  <li>copy attributes from <code>&lt;line&gt;</code> into <code>&lt;polyine&gt;</code>'s points attributes</li>
  <li>add attribute that draws a straight, horizontal line to <code>&lt;polyline&gt;</code> by simply doing <code>last x-value + 30</code></li>
  <li><p>Then adapt text somehow with transform</p></li>
  <li><p>Apart from the fact that this is a lot less elegant than Bueza's example, I also did not mind that one doesn't know if the horizontal line needs to go left or right (labels could be on both sides of the chart).</p></li>
  </ul></li>
  </ul>
  
  <p>Can anyone please</p>
  
  <ul>
  <li>Tell me why <code>&lt;line&gt;</code>has a different output than <code>&lt;polyline&gt;</code>?</li>
  <li>Make that "Slice to text"-thing from Buezas example a little clearer to a newbie?</li>
  </ul>
  
  <p>Here's my try: <a href="http://jsfiddle.net/HdwTH/40/" rel="nofollow">http://jsfiddle.net/HdwTH/40/</a></p>
  
  <p>Thanks a lot.</p>