为什么我在D3js中使用相同的代码获得不同的结果?

时间:2016-12-17 08:08:02

标签: javascript jquery d3.js

我使用d3js在条形图项目中达到了死胡同。我试图使用tsv文件中的数据找到不同国家的无人机数量之和。由于电子表格中的多个条目来自同一个国家/地区,因此我希望添加这些值。

当我在.attr('y')下运行一次代码时,问题就解决了。我仔细检查了电子表格,并将总和加起来。但是当我在.attr('height')中运行相同的条件时,我得到的条件很糟糕,这使得条形图搞得一团糟。这是我遇到问题的代码:

 g.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.Country); })
      .attr("y", function(d,i) { 

        try{
          if (data[i].Country == data[i-1].Country){

            data[i].Registration += data[i-1].Registration;
          }
          else{
            console.log(data[i-1].Country + ' ' + data[i-1].Registration);
            return data[i-1].Registration;//y(data[i-1].Registration);
          }
        }
        catch(err){
          console.log('did not work')
        }

      })
      .attr("width",20)
      .attr("height", function(d,i) { 
        try{ //SAME CODE DIFFERENT REGISTRATION VALUES

          if (data[i].Country == data[i-1].Country){
            data[i].Registration += data[i-1].Registration;
          }
        else{ console.log(data[i-1].Country + ' ' + data[i-1].Registration); return (height - data[i-1].Registration);}
        }
        catch(err){
          console.log('did not work')
        }


      });
    })

tsv文件如下所示:

Country Registration
land Islands   1
American Samoa  1
American Samoa  1
American Samoa  1
American Samoa  6
American Samoa  1
American Samoa  1
American Samoa  1
Antigua and Barbuda 1
Argentina   1
Australia   1
Australia   2
Australia   1
Australia   1
Brazil  1
Brazil  1
Brazil  1

我把entire code放在js小提琴上。我非常感谢帮助,因为我花了一天多的时间来强调解决方案。

1 个答案:

答案 0 :(得分:2)

您需要总结您的价值观:

因此,如果您的数据有多个"美属萨摩亚"那么你需要总结所有无人机,总计达12个。

为此,请使用d3 nest对其注册进行分组和总结。

  var data_sum = d3.nest()
  .key(function(d) { return d.Country; })//group by country
  .rollup(function(v) { return d3.sum(v, function(d) { return d.Registration; }); })//roll up all resgistrations
  .entries(data);

现在,这将为您提供总结数据,可用于制作条形图,就像example一样。

工作代码here