生成 api 数据的 D3 饼图

Question

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

问题是在 d3.layout.pie 的 .value 中的 'return' 之后，它不会生成具有不同数组（至少不止一个数组）的饼图。

我想要所有 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，您不会显式循环数据。你绑定你的数组，它根据数组的内容绘制。在您的情况下，您将绑定数组：

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

然后给它一个价值函数给return你想要绘制的片段：

 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);
 });

注意，未经测试的代码。

生成 api 数据的 D3 饼图

Generate D3 Pie Chart of api data

javascript

arrays

d3.js

angularjs