D3餅圖innerRadius和outerRadius作用時髦

Question

餅圖弧每個似乎都有自己的半徑行爲，當我他們想要的所有份額，在通過了最高值的半徑。是相關的代碼。

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

你傳遞功能的訪問器半徑：

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

那麼D3是要調用這些函數爲每個數據元素，並使用它從該得到的值。如果你想要一些常數，請指定一個單一的數字，例如

.innerRadius(30) 
.outerRadius(50); 

要使用每個弧的最大值，可以這樣做。

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