title: How to vary the size of piechart in d3 with tree layout
body: <p>I am trying to display a tree diagram with piechart as the nodes with the size of the piechart scaled according to data. I am still stump at the last part:</p>
  
  <p>var arc = d3.svg.arc().outerRadius(20)</p>
  
  <p>fix the radius at 20. </p>
  
  <p>How can I vary it according to the "count" property. A jsfiddle demo is here: <a href="http://jsfiddle.net/uB4U2/" rel="nofollow">http://jsfiddle.net/uB4U2/</a></p>
  
  <p>The data is contained as:</p>
  
  <pre><code>var treeData = {"name" : "Root", "info" : "1", "count" : 9, "value" : [1,2,3], 
              "children" : [
             {"name" : "A", "info" : "2", "count" : 10, "value" : [2,2,2] }, 
             {"name" : "B", "info" : "3", "count" : 15, "value" : [2,2,2] }, 
             {"name" : "C", "info" : "4", "count" : 2, "value" : [2,2,2] , 
              "children": [
                  {"name" : "C1", "info" : "5", "count" : 7, "value" : [2,3,4] }, 
                  {"name" : "C2", "info" : "6", "count" : 8, "value" : [2,3,4] }
                      ]} 
              ]};
  </code></pre>
  
  <p>Thanks!</p>