круговая диаграмма d3.js

Question

Я создаю круговую диаграмму с данными json. Arcs создают прекрасный, но они не принимают цвет и текст, я даю , он анализирует данные 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); }); 

и аналогично для текста.