在D3中生成餅圖時遇到問題

Question

我想從外部數據生成d3中的餅圖，在下面的代碼中找不到錯誤，因爲它沒有引發任何錯誤。

這裏是我的代碼

//file path is correct 
    d3.json("errortable12.json", function(data){ 

    //var obj = JSON.parse(data); 
    var r= 300; 
    var color =d3.scale.ordinal() 
       .range(["red","blue","orange"]) 
    console.log(data); 

    var canvas = d3.select("body").append("svg") 
        .attr("width",1500) 
        .attr("height",1500); 

    var group = canvas.append("g") 
        .attr("transform","translate(300,300)"); 

    var arc = d3.svg.arc() 
       .innerRadius(200) 
       .outerRadius(r); 

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

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

    arcs.append("path") 
     .attr("d.age",arc); 

    arcs.append("path") 
     .attr("d.age",arc) 
     .attr("fill",function(d){return color(d.data);}); 

Answer 1

兩個問題。首先，「d.age」不是SVG屬性，只需使用「d」即可。另外，不需要追加兩條路徑，只需調用一次即可。其次，通過d.data顏色無效，只需使用i。

arcs.append("path") 
    .attr("d.age",arc); //<-- d.age is not a valid SVG attribute 

arcs.append("path") 
    .attr("d.age",arc) //<-- why repeat this twice? 
    .attr("fill",function(d){return color(d.data);}); 

應該僅僅是：

 arcs.append("path") 
     .attr("d", arc) 
     .attr("fill", function(d,i) { 
      // return color(d.data); 
      return color(i); //<-- just use i 
    }); 

的完整代碼here。