javascript - 生成api数据的D3饼图

Question

我正在尝试使用 API 数据创建 D3 饼图。

问题是，在d3.layout.pie的.value中“返回”后，它不会生成具有不同数组的饼图(至少不止一个数组)。

我想要所有 count_downloads(不同切片中的数组。jsondata.uploads.length 包含 50 个数组(或数字)。数据看起来(在控制台中)如下所示:[10, 2, 34, 29, 57, 30, 35]。

dataExample.json 只是一个占位符，因为该数据来自 api。

谢谢!

(function() {  

  var app = angular.module('nounTranslate', []);
  var json

  app.controller('apiController', function(){

    var request_data = {
        url: 'oath.php',
        method: 'GET',
        data: {
          term: 'beer',
          site: 'http://api.thenounproject.com/'
        } 
    };

    var array = []

    $.ajax({
        url: request_data.url,
        type: request_data.method,
        data: request_data.data,
        dataType: "json"
    }).done(function(jsondata) {

        // HIER KOMT DE API DATA BINNEN  

        //nieuwe (json)data zodat het niet conflict raakt 
        json = jsondata;

        d3.json("dataExample.json", function (data) {   

          setTimeout(function() {

          }, 600);  

          for(i=0;i<jsondata.uploads.length;i++){

            jsonArrays = jsondata.uploads[i].count_download
            array.push(jsonArrays);  

            // console.log(array);

            var pie = d3.layout.pie()
              .padAngle(.02) // Ruimte tussen de arcs
              .value(function(d) { // Vormt de data om naar de layout van de pie chart 
                  console.log(array);
                  return parseInt(array);
              })
          }

          var body = d3.select("body");
          var div = body.append("div")  
              .attr("id","chart")
              .attr("class","chart")

          // De omvang van de donut chart
          var width = 260,
              height = 260;

          // Maakt de donut chart rond   
          var outerRadius = height / 2 - 10,
              innerRadius = outerRadius / 2,
              cornerRadius = 10;
              colors = d3.scale.category20c(); // Gebruikt een preset aan matchende kleuren

          //Geeft eigenschappen mee aan de arc (boog) vorm
          var arc = d3.svg.arc()
              .padRadius(outerRadius)
              .innerRadius(innerRadius);

          //Informatie weergaven arcs    
          var infoHover = d3.select('#chart').append('div')
              .style('position', 'absolute')
              .style('padding', '0 25px')
              .style('opacity', 0)


          //Functie: veranderd hoogte - (outer)radius arc in een animatie     
          function arcTween(outerRadius, delay) {
            return function() {
              d3.select(this).transition().delay(delay).attrTween("d", function(d) {
                var i = d3.interpolate(d.outerRadius, outerRadius);
                return function(t) { d.outerRadius = i(t); return arc(d); };
              });
            };
          }

          //Plaats de chart in de div 
          var svg = d3.select("#chart").append("svg")
              .data(data)
              .attr("width", width)
              .attr("height", height)
            .append("g")
              .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") //Positie chart
            .selectAll('path').data(pie(data)) // Selecteerd onderstaand path, gebruikt pie layout en de data
            .enter().append('path')
              .attr('fill', function(d, i) {
                  return colors(i); // Voeg de kleuren (category20c) toe bij alle data: index
              })
              .each(function(d) { d.outerRadius = outerRadius - 20; })
              .attr('d', arc) // Maakt de arc (buitenste cirkel)

Answer 1

我想我明白你在问什么。

使用 d3，您无需显式循环数据。您绑定(bind)数组，它根据数组的内容进行绘制。在您的情况下，您将绑定(bind)您的数组:

.selectAll('path').data(pie(jsondata.uploads)) // Selecteerd onderstaand path, gebruikt pie layout en de data

然后给它一个值函数来返回你想要绘制的部分:

 var pie = d3.layout.pie()
     .padAngle(.02) // Ruimte tussen de arcs
     .value(function(d) { // Vormt de data om naar de layout van de pie chart 
         return d.count_download;
     });

值函数 d 是 jsondata.uploads 数组中的每个项目。

编辑

要访问您的点击值，类似于:

...
.enter().append('path')
.attr('fill', function(d, i) {
    return colors(i); // Voeg de kleuren (category20c) toe bij alle data: index
})
.each(function(d) { d.outerRadius = outerRadius - 20; })
.attr('d', arc)
.on("click", function(d,i){
   alert(d.data.count_download);
 });

注意，未经测试的代码。