Javascript 为什么在D3js中使用相同的代码会得到不同的结果?
在使用d3js的条形图项目中,我已经走到了死胡同。我试图用tsv文件中的数据来找出不同国家的无人机数量之和。由于电子表格中的多个条目来自同一个国家,我想添加这些值 因此,当我在Javascript 为什么在D3js中使用相同的代码会得到不同的结果?,javascript,jquery,d3.js,Javascript,Jquery,D3.js,在使用d3js的条形图项目中,我已经走到了死胡同。我试图用tsv文件中的数据来找出不同国家的无人机数量之和。由于电子表格中的多个条目来自同一个国家,我想添加这些值 因此,当我在.attr('y')下运行一次代码时,它就成功了。我仔细检查了电子表格,把总数加起来。但是当我在.attr('height')中运行相同的条件时,我得到了一些不稳定的值,这些值把条形图搞砸了。以下是我遇到问题的代码: g.selectAll(".bar") .data(data) .enter().app
.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
我把小提琴拉上了。我真的很感谢你的帮助,因为我已经花了一天多的时间在解决问题上 您需要总结您的价值观: 因此,如果您的数据有多个“美属萨摩亚”,那么您需要将所有无人机相加,总计为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);
现在,这将为您提供汇总数据,这些数据可用于制作条形图,如下所示
工作代码你能说出你到底想要实现什么吗?你的JSFIDLE不工作。它缺少D3,即使在修复之后也会出现一些其他错误。您看到不同结果的原因是因为执行
data[i]。注册+=data[i-1]。注册代码>您实际上正在更改数据。请注意+=
。在回调到height
中进行计算时,您的数据已被上一次回调到y
时更改。Cyril's提供了一个可能的解决方案。我添加了一个解释,解释了为什么会发生这种情况。在你的答案中也可以包含这一点。