title: How to add text to paths
body: <p>I suspect I'm barking up the wrong tree - although I've got no errors in the console to help me out.</p>
  
  <p>I've got this block of code:</p>
  
  <pre><code>var path = svg.data([json]).selectAll("path")
      .data(partition.nodes)
      .enter()
      .append("path")
      .attr("display", function(d) {
          return d.depth ? null : "none";
      })
      .attr("d", arc)
      .style("stroke", "#fff")
      .style("fill", function(d) {
          return color((d.children ? d : d.parent).name);
      })
      .attr("fill-rule", "evenodd")
      .style("opacity", 1)
      .each(stash);
  
  //&gt;&gt;this section functions ok
  path.append("title")
      .text(function(d) {
          return d.name + ": " + d.amount;
      });
  
  //&gt;&gt;this section throws no errors but "foo" does not appear
  path.append("text")
      .text(function(d) {
          return "foo";
      })
      .style("stroke", "#3b5998")
      .style("fill", "#3b5998");
  </code></pre>
  
  <p>The code snippet beginning <code>path.append("title")...</code> works ok but the final snippet beginning <code>path.append("text")...</code> adds the text foo to the html but it is not visible on the webpage - why is it not visible and how do I add labels?</p>
  
  <p>This is part of this visual:</p>
  
  <p><a href="http://plnkr.co/edit/q9ODd5?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/q9ODd5?p=preview</a></p>