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 });

然后你可以像使用另一个饼图的原始变量一样使用这个新变量。

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

1 个答案: