CODEWITHSUNDEEP
d3.js
fishtank
fishtank

Reputation: 3728

How to vary the size of piechart in d3 with tree layout

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:

var arc = d3.svg.arc().outerRadius(20)

fix the radius at 20.

How can I vary it according to the "count" property. A jsfiddle demo is here: http://jsfiddle.net/uB4U2/

The data is contained as:

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] }
                    ]} 
            ]};

Thanks!

Upvotes: 0

Views: 1497

Answers (2)

AmeliaBR
AmeliaBR

Reputation: 27544

Your example shows that you were trying to set the outerRadius based on a function of the data, but gave up and just set it to return a constant value:

var arc = d3.svg.arc().outerRadius(function(d) { console.log(d); return radius; });

The reason this wasn't working is because the data passed in to the arc generator is the data object for each individual slice in the pie. This could be used, for example, to create a graph like this: A "Spie Chart"

Cool, but not what you want. You wanted to size the entire pie based on the total count, right? However, that data isn't available directly to the arc function, which only has information about one slice at a time. So you need to set the radius when the data for the whole pie is available -- when you are still working with the nodes. Because we want to modify the arc generator function for the node and then use it when drawing the slices, we have to group everything for creating the pie into an each() method call:

node.each(function(d){
    arc = arc.outerRadius(d.count);

    d3.select(this)
    .selectAll("path")
        .data(function(d){ return pie(d.value); })
    .enter().append("svg:path")
        .attr("d", arc)
        .style("fill", function(d,i){ return color(i) });    
})

With that change to your code, you get: http://jsfiddle.net/uB4U2/3/

P.S. I'm a little confused about your "count" properties, since the count for parents are sometimes smaller than the count for children. If this isn't what you wanted, I hope it has given you enough information to figure out where to go from here. --ABR

Upvotes: 2

Manoj
Manoj

Reputation: 1890

Create dynamic radius according to the maximum number of count.Try this code for maximum number

DEMO

D3.js:

  var Maxcount = new Array();
  $.each(nodes, function (i,value) {
          Maxcount.push(value.count);
       });
  radius =d3.max(Maxcount);

Upvotes: 0

Related Questions