餅圖d3.js

我創建使用JSON數據餅圖..弧打造精品，但他們並沒有採取顏色和文字我給它解析JSON數據取值而不是不同返回不同的顏色名字......和類似與文本的情況太..但是當我嘗試在控制檯它打印... 打印...這裏是我的代碼餅圖d3.js

 function drawPiechart(dataurl, selector){ 

      var width = 130, 
      height = 130, 
      radius = Math.min(width, height)/2; 

      var color = d3.scale.category20(); 

      var arc = d3.svg.arc() 
       .outerRadius(radius - 10) 
       .innerRadius(0); 
      /*var arc1 = d3.svg.arc() 
       .outerRadius(radius + 10) 
       .innerRadius(0);*/ 

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

      var svg = d3.select(selector).append("svg") 
       .attr("width", width) 
       .attr("height", height) 
       .append("g") 
       .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

      d3.json(dataurl, function(error, data) { 
      console.log(data); 
       data.HubActivity.hubWorkloadList.forEach(function(d) { 
       d.workload = +d.workload; 
       console.log(d.workload); 
       }); 
      /*function animateFirstStep(){ 
       d3.select(this) 
        .transition()    
        .delay(0)    
        .duration(1000) 
        .attr("d",arc1) 
        .each("end", animateSecondStep); 
      }; 
      function animateSecondStep(){ 
       d3.select(this) 
        .transition() 
        .duration(1000) 
        .attr("d", arc); 
      };*/ 
       var g = svg.selectAll(".arc") 
        .data(pie(data.HubActivity.hubWorkloadList)) 
       .enter().append("g") 
        .attr("class", "arc"); 

       g.append("path") 
        .attr("d", arc) 
        .style("fill", function(d) { return color(d.trName); }); 
        // .on("mouseover", animateFirstStep); 

       g.append("text") 
        .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) 
        .attr("dy", ".35em") 
        .style("text-anchor", "middle") 
        .style("fill","black") 
        .text(function(d) { console.log(d.workload); }); 

      }); 
     }; 





     drawPiechart("../data/pie0.json", "#workload");

這裏是我的JSON數據

{ 
"HubActivity": {   
    "hubWorkloadList": [ 
     { 
      "trName": "addAccessDateValue", 
      "workload": "20.00" 
     }, 
     { 
      "trName": "addAddress", 
      "workload": "10.00" 
     }, 
     { 
      "trName": "getAccessDateValue", 
      "workload": "10.00" 
     }, 
     { 
      "trName": "getAddress", 
      "workload": "10.00" 
     }, 
     { 
      "trName": "searchCategory", 
      "workload": "10.00" 
     }, 
     { 
      "trName": "searchCategoryHierarchy", 
      "workload": "10.00" 
     }, 
     { 
      "trName": "updateAccessDateValue", 
      "workload": "30.00" 
     }, 
     { 
      "trName": "updateAddressNote", 
      "workload": "10.00" 
     }, 
     { 
      "trName": "updateAddressValue", 
      "workload": "10.00" 
     }, 
     { 
      "trName": "updateAlert", 
      "workload": "10.00" 
     } 
    ] 
} 
}

請告訴錯誤在哪裏...

來源

2013-03-07 Saurabh Sinha

d3.layout.pie函數創建一個新的數據結構，其中包含在頂層繪製圖表所需的信息。這就是您在選擇顏色和附加文本時正在處理的內容，這就是爲什麼它不起作用 - 您正在查找的數據不再是以前的位置。

在pie()返回的每個元素中，都有一個包含原始數據的成員.data。使用這個，你可以訪問你正在尋找的信息。也就是說，你需要改變

.style("fill", function(d) { return color(d.trName); });

到

.style("fill", function(d) { return color(d.data.trName); });

，同樣的文本。

來源

2013-03-07 09:43:33

回答

相關問題