1

我通过 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});
4

1 回答 1

2

是的，这当然是可能的。您只需创建几个具有不同.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 });

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

于 2013-05-11T15:22:37.367 回答