title: D3JS packed circle layout, padding in relation to parent
body: <p>I am looking for a way to add padding between parent and child nodes when using the circle packing layout to allow for labeling non-leaf nodes. This is to allow label intermediate nodes as only labeling the lead nodes like the examples, <a href="http://strongriley.github.io/d3/ex/pack.html" rel="nofollow">http://strongriley.github.io/d3/ex/pack.html</a>, doesn't expose the level of information that I would like to.</p>
  
  <p>Currently I'm producing this jsfiddle, <a href="http://jsfiddle.net/rJC2E/" rel="nofollow">http://jsfiddle.net/rJC2E/</a>. But as you can see the intermediate labels overlap. Currently my radius is set simply using the following code</p>
  
  <pre><code> node.append("circle")
                      .attr("r", (d) -&gt; d.r)
  </code></pre>
  
  <p>I've attempted altering the radius by multipling by .9, and so forth, but that did not lead to the results I was looking for. Current code in coffeescript is:</p>
  
  <pre><code>        d3.json("/distilleries.json", (dat) -&gt;
              svgRoot = d3.select('body')
                      .append("svg").attr("width", "100%").attr("height",1000)
                      .append('g')
                      .attr("transform", "translate(200,200)")
  
              diameter = 900
              format = d3.format(",d")
  
              pack = d3.layout.pack()
                      .size([diameter - 100, diameter - 100])
                      .value((d) -&gt; d.size)
                      .padding(10)
  
              node = svgRoot.datum(dat).selectAll(".node")
                      .data(pack.nodes)
                      .enter()
                      .append("g")
                      .attr("offsetWidth", 20)
                      .attr("class", (d) -&gt; if d.children then "node" else "leaf node")
                      .attr("transform", (d) -&gt; "translate(" + d.x + "," + d.y + ")")
  
              node.append("circle")
                      .attr("r", (d) -&gt; d.r)
  
              arc = d3.svg.arc()
                      .innerRadius((d,i) -&gt; d.r - 1)
                      .outerRadius((d) -&gt; d.r)
                      .startAngle(0)
                      .endAngle(2 * Math.PI)
  
  
              node.filter((d) -&gt; d.children)
                      .append("path")
                      .style("visibility", "hidden")
                      .attr("id", (d,i) -&gt; "p"+i)
                      .attr("d", arc)
  
              node.filter((d)-&gt; d.children )
                      .append("text")
                      .append("textPath")
                      .attr("textLength", (d,i) -&gt; 100 )
                      .attr("xlink:href", (d, i) -&gt; console.log(d.name + i); "#p" + i)
                      .attr("startOffset", (d) -&gt; Math.random()*(0.2 - 0.15) + 0.15)
                      .attr("dy", (d) -&gt; if d.children then - d.r else ".3em")
                      .style("text-anchor", "middle")
                      .text((d) -&gt; d.name)
                      .attr("class", (d) -&gt; 
                                      d.class 
                      )
              node.filter((d)-&gt; !(d.children) )
                      .append("text")
                      .style("text-anchor", "middle")
                      .text((d, i) -&gt; d.name)
              )
  </code></pre>
  
  <p>Thank you,</p>