饼图d3.js

Question

我创建使用JSON数据饼图..弧打造精品，但他们并没有采取颜色和文字我给 它解析JSON数据取值而不是不同返回不同的颜色名字......和类似与文本的情况太..但是当我尝试在控制台它打印... 打印...这里是我的代码

 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" 
     } 
    ] 
} 
} 

请告诉错误在哪里...

Answer 1

d3.layout.pie函数创建一个新的数据结构，其中包含在顶层绘制图表所需的信息。这就是您在选择颜色和附加文本时正在处理的内容，这就是为什么它不起作用 - 您正在查找的数据不再是以前的位置。

在pie()返回的每个元素中，都有一个包含原始数据的成员.data。使用这个，你可以访问你正在寻找的信息。也就是说，你需要改变

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

到

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

，同样的文本。