在单个对象中使用多个值的饼图布局

Question

我有一个通过 AJAX 调用在 JSON 输出中返回的对象数组，如下所示：

[{"applicants":"100","successful_applicants":"50","role":"program advisor"},
{"applicants":"120","successful_applicants":"80","role":"academic counselor"},
{"applicants":"100","successful_applicants":"50","role":"mathematics tutor"}]

我作为一个名为 data 的变量传入。

我目前正在调用 d3.pie 布局，如下所示：

$.post('search.php', {search_term:search_term}, function(data) {
    var arc = d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);
    var pie = d3.layout.pie()
                .value(function (d) {return d.successful_applicants });

然后在为返回的数组中的每个对象创建一个 svg 之后，我追加如下...

    var arcs = group
               .append("path")
               .attr("d", arc)
               .attr("fill", "red")
               .attr("stroke", "steelblue")
               .attr("stroke-width", "1px")
               .attr("transform", "translate(" + (box_width + stroke_width)/2 + "," + (box_height + stroke_width)/2 + ")");
} 

我希望使用 d3.js 为返回的数组中的每个对象生成一个饼图，显示两个切片：显示成功`_申请者占的百分比>申请人。简而言之，这将是两个数据点“成功的申请人”和“不成功的申请人”，这两个数据点的总和应该生成一个完整的圆圈。

如何让 d3 动态生成所需的“成功申请者”和“失败申请者”数组？答案在 .value() 函数中吗？到目前为止，我能做的最好的事情是从数组中的每个对象中绘制一个值作为弧/切片（从行中可以明显看出......

.value(function (d)  { return d.successful_applicants});

Answer 1

是的，这当然是可能的。您只需使用不同的.value() 函数创建多个饼图布局，或者，如果您愿意，可以使用一个饼图布局并将不同的数据子集作为值传递。无论哪种情况，您都可以用相同的方式绘制实际图表。

需要明确的是，D3 中没有任何东西可以为您提供开箱即用的多个图表。您必须自己创建/排列它们，但没有什么限制给定函数只能应用于一个图表。

例如，除了

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

你可以有

var pie1 = d3.layout.pie()
            .value(function (d) {return d.applicants });

然后您可以将这个新变量以与原始变量相同的方式用于另一个饼图。