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 を使用して、返された配列内のオブジェクトごとに 1 つの円グラフを生成し、2 つのスライスを表示したいと考えています。簡単に言えば、これは「合格した応募者」と「不合格の応募者」の 2 つのデータ ポイントであり、これら 2 つのデータ ポイントの合計は完全な円を生成する必要があります。

「成功した応募者」と「失敗した応募者」の必要な配列をd3に動的に生成させるにはどうすればよいですか? 答えは .value() 関数内にありますか? これまでにできる最善の方法は、配列内の各オブジェクトから1つの値をアーク/スライスとして描画することです(行から明らかなように...

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

1 に答える 1