javascript - JSON を使用して、D3 で円グラフを描画する

Question

D3で円グラフを描いています。DBからデータを取得します。サンプル JSON を以下に示します。私のチャートには凡例として SLA コンプライアンスが含まれている必要があり、円グラフは毎月の SLA コンプライアンスの値 (ここでは 100) で描画される必要があります。伝説は順調に来ています。ここで、「SLA コンプライアンス」は、他のラジオ ボタン/ドロップ ダウンをクリックすると、さまざまなチャートで変化するラベルです。コンソールに値を出力すると、Var pie が呼び出されると、その値が未定義になることがわかりました。チャートが表示されません。誰か助けてくれませんか。

サンプル JSON:

[
 {month:"Nov-11", 'SLA Compliance':100},{month:"Dec-11", 'SLA Compliance':100}, 
 {month:"Jan-12", 'SLA Compliance':100}, {month:"Feb-12", 'SLA Compliance':100}, 
 {month:"Mar-12", 'SLA Compliance':100}, {month:"Apr-12", 'SLA Compliance':100
]

コード：

function drawPieChart3(xData,data,svg,index,selectedIndex){
    var width = 400, 
        height = 100,
        radius = Math.min(width, height) / 2;

    var color = d3.scale.category20();

    var arc = d3.svg.arc()
        .outerRadius(radius - 10)
        .innerRadius(0);

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

    var temp= d3.keys(data[0]).filter(function(key) { return key !== "month"; })
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "month"; })); 

    data.forEach(function(d) {
        d.month=d.month
        d.pieValue = temp.map(function(name) {  
            return {name: name, value: +d[name]}; });


    var g=svg.selectAll(".arc")
        .data(pie(data))
        .enter().append("g")
        .attr("class", "arc");

        g.append("path")
        .attr("d", arc)
        .style("fill", function(d) {return color(d.data.month); 

        g.append("text")
        .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .text(function(d) {
        return d.data.month; });


    //legend portion 
    alert("11. in legend portion")
    var mylegend = svg.selectAll(".mylegend")
        .data(temp)
        .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(0," + (legentCount+i+1) * 20 + ")"; });

   mylegend.append("rect")
        .attr("x", width+40)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color);

   mylegend.append("text")
        .attr("x", width+60)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "start")
        .text(function(d) { return d; });


  }