Question

我有一个像这样的JSON文件：

**[{"Year":2013,"Country":"Lebanon","Total_no_of_refugees":856513},{"Year":2013,"Country":"Jordan","Total_no_of_refugees":641887},{"Year":2013,"Country":"Turkey","Total_no_of_refugees":605985},{"Year":2013,"Country":"Kenya","Total_no_of_refugees":534915},{"Year":2013,"Country":"Chad","Total_no_of_refugees":434461},{"Year":2013,"Country":"Ethiopia","Total_no_of_refugees":433923},{"Year":2013,"Country":"China","Total_no_of_refugees":301038},{"Year":2013,"Country":"United States","Total_no_of_refugees":262547},{"Year":2013,"Country":"Iraq","Total_no_of_refugees":246289},{"Year":2013,"Country":"Yemen","Total_no_of_refugees":241276},{"Year":2013,"Country":"Bangladesh","Total_no_of_refugees":231137},{"Year":2013,"Country":"Egypt","Total_no_of_refugees":230055}.....**

此数据存储在sum_list变量中。

当我尝试创建此数据D3的可视化时，它会显示错误消息

visualization.js:127 iniside0
visualization.js:129 "Lebanon"
visualization.js:130 856513
d3.js:670 Error: <rect> attribute height: Expected length, "NaN".
visualization.js:127 iniside1
visualization.js:129 "Jordan"
visualization.js:130 641887
d3.js:670 Error: <rect> attribute height: Expected length, "NaN".
visualization.js:127 iniside2
visualization.js:129 "Turkey"
visualization.js:130 605985
d3.js:670 Error: <rect> attribute height: Expected length, "NaN".
visualization.js:127 iniside3
visualization.js:129 "Kenya"
visualization.js:130 534915
d3.js:670 Error: <rect> attribute height: Expected length, "NaN".
visualization.js:127 iniside4
visualization.js:129 "Chad"

以下是代码：

 'use strict'; //strict mode: catch silly errors

function parseData(a)
{

    var listOfObjects = [];
    a.forEach(function(entry) {
        var singleObj = {};
         singleObj['Year']=parseInt(entry['year']);
        singleObj['Country'] = entry['country_of_residence_en'];

        singleObj['Number_of_refugees'] = entry['value']==null?0:parseInt(entry['value']);

    listOfObjects.push(singleObj);  
} );

return listOfObjects;

}
function loaddata()
{

   var final_list = $.getJSON('http://data.unhcr.org/api/stats/time_series_all_years.json?year=2000&population_type_code=RF').then(function(data){    
       var v= parseData(data);


       return v;
   });

   return final_list;
 }


 function summation()
 {      var sum_list = [];
        var tout=loaddata();
      $.when(tout).then
 (function(tout){

         var prev_contry;

          var sum = tout[0].Number_of_refugees;

          var count=0;

           prev_contry = tout[0].Country;       
         for(var i=1; i<tout.length;i++){
            var simple_obj = {};
             if (tout[i].Country==prev_contry){

                 sum += tout[i].Number_of_refugees;

             }
             else { 

                 simple_obj['Year']= tout[i].Year;

                 simple_obj['Country']= prev_contry;

                 simple_obj['Total_no_of_refugees']= sum;

                  sum_list.push(simple_obj);  

                  sum = 0;

             }

             prev_contry = tout[i].Country;


         }
            sum_list.sort(function (a, b) { var aSize = a.Year;
    var bSize = b.Year;
    var aLow = a.Total_no_of_refugees;
    var bLow = b.Total_no_of_refugees;

    if(aSize == bSize)
    {
        return (aLow > bLow) ? -1 : (aLow < bLow) ? 1 : 0;
    }
    else
    {
        return (aSize > bSize) ? -1 : 1;
    }
});


var scale = d3.scale.linear();
scale.domain([0,600000]);
scale.range(5,25)

var svg = d3.select("body")
            .append("svg")


svg.selectAll("rect")
   .data(sum_list)
   .enter()
   .append("rect")
  .attr("x", function(d, i) {
    return i * 42;  //Bar width of 20 plus 1 for padding
})
   .attr("y",15)
   .attr("width", 20)
   .attr("height", function(d, i) {


if (sum_list[i].Year=='2013'){
    console.log("iniside"+i);
    while((i+1)<=6){
        console.log(JSON.stringify(sum_list[i].Country))
       return ((scale(sum_list[i].Total_no_of_refugees))*4);
    }
}
})




      console.log(JSON.stringify(sum_list));
      })
       return sum_list; 
      }

summation();

此错误不会在屏幕上创建任何可视化

帮助将被证实：）

Answer 1

return (console.log(parseInt(sum_list[i].Total_no_of_refugees))*4);

console.log不返回任何内容=返回undefined;因此，你对任何操作都有NaN。

删除console.log：

return parseInt(sum_list[i].Total_no_of_refugees)*4;

d3.js：670错误：<rect>属性y：预期长度，“NaN”

1 个答案: