我在使用d3js的条形图项目中遇到了死胡同。我试图从tsv文件中找到不同国家的无人机数量总和。由于电子表格中的多个条目来自同一个国家/地区,因此我想添加这些值。为什么在D3js中使用相同的代码会得到不同的结果?
因此,当我在.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小提琴。我非常感谢帮助,因为我花了一天的时间强调解决方案。
你能告诉你到底想要达到什么吗? –
您的JSFiddle无法正常工作。它缺少D3,甚至在修复之后还有其他一些错误。 – altocumulus
您看到不同结果的原因是因为在执行data [i] .Registration + = data [i-1] .Registration时;'您实际上正在修改数据。注意[添加赋值操作符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment)'+ ='。在回调“高度”时进行计算时,您的数据已被先前的回调改为“y”。 Cyril提供了一种可能的解决方案[答案](http://stackoverflow.com/a/41197222/4235784)。 – altocumulus