d3 pie charts innerRadius and outerRadius acting funky

Question

The pie charts' arcs each seem to have their own radius behaviors, when i want them to all share the radius of the highest value passed in. here's the relevant code.

var pie = d3.layout.pie()
  .value(function(d) {
    return d;
  }).sort(null);

var arc = d3.svg.arc()
  .innerRadius(function(d, i) { console.log(d, i); return (d.value * .6) })
  .outerRadius(function(d) { return d.value; });

var fill = d3.scale.linear()
    .domain([0, 2])
    .range(["red", "blue"]);

var force = d3.layout.force()
    .nodes(data)
    .size([width + 250, height + 50])
    .on("tick", tick)
    .charge(charge)
    .gravity(.15);

    force.start();

function charge(d) {
    return d.rank * d.rank * -.25;
}
var svg = d3.select("body").append("svg")
    .attr("width", width + 250)
    .attr("height", height + 50);

var nodes = svg.selectAll(".node")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "node");
    // .attr("cx", function(d) { return d.x; })
 //     .attr("cy", function(d) { return d.y; })
 //     .attr("r", function(d) { return d.rank; })
 nodes.selectAll("path")
.data(function(d) { 
    var ar = []; 
    ar.push(prostitution_scale(d.prostitution)); 
    ar.push(cigarette_scale(d.cigarettes));
    ar.push(alcohol_scale(d.alcohol));
    return pie(ar); 
})
.enter()
.append("svg:path")
.attr("d", arc)
.style("fill", function(d, i) { return fill(i); })
.style("stroke", function(d, i) { return d3.rgb(fill(d.value)).darker(2); })
.call(force.drag);

Answer 1

You're passing functions to the accessors for the radii:

.innerRadius(function(d, i) { console.log(d, i); return (d.value * .6) })
.outerRadius(function(d) { return d.value; });

So D3 is going to call these functions for every data element and use the value it gets from that. If you want something constant, specify a single number, e.g.

.innerRadius(30)
.outerRadius(50);

To get use the maximum value for each arc, you could do something like this.

nodes.selectAll("path")
.data(function(d) { 
    var ar = []; 
    ar.push(prostitution_scale(d.prostitution)); 
    ar.push(cigarette_scale(d.cigarettes));
    ar.push(alcohol_scale(d.alcohol));
    var segments = pie(ar),
        maxValue = d3.max(segments, function(d) { return d.value; });
    pie.forEach(function(d) { d.maxVal = maxValue; });
    return segments; 
})
.enter()
.append("svg:path")
.attr("d", arc.innerRadius(function(d) { return d.maxVal * 0.6; })
              .outerRadius(function(d) { return d.maxVal; }))
// etc