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