我正在努力改变这个population pyramid by Mike Bostock。我的数据与他的数据一样,是一个CSV,其中男性/女性人群分布在不同的"" (他是年龄组,我的是地区)多年。
我的问题涉及数组如何在DOM中工作。最初,在调用我的CSV并执行console.log(dataset)
后,我的数据如下所示:
也就是说,对于每个round
,我有region
,其次是男性和女性人口数。一切都很好。但是,我计划添加在每个round
上移动的转换(例如,条形图显示第0轮中所有区域的M / F弹出,然后是第1轮中的.on(单击),等等)。为此,我跟随迈克的领导并使用了d3.nest
:
data = d3.nest()
.key(function(d) { return d.region; })
.key(function(d) { return d.round; })
.rollup(function(v) { return v.map(function(d) { return d.people; }); })
.map(data);
我的数据现在在DOM(console.log(data)
)中看起来像这样:
这看起来也不错 - 我的数据现在由region
组织,细分为rounds
(以及那些男性/女性流行音乐)。
现在我被卡住了。我只是不知道如何从data
调用数据(而不是dataset
)。例如,我想为每个rect
region
的男性/女性创建一些round==0
组。我正在使用Mike的代码 -
regions.selectAll("rect")
.data(function(region) { return data[round][region] || [0, 0]; })
.enter().append("rect")
.attr("x", -barWidth / 2)
.attr("width", barWidth)
.attr("y", y)
.attr("height", function(value) { return h - d.people; })
.attr("fill", "green");
- 作为基础,并在JS控制台中尝试data.arusha[0]
的变体,例如,查看如何访问每一部分。我已经浏览了一些JS教程,并了解(好吧,有点)你可以通过以下方式访问数组的第一部分:
var fruits = ["Apple", "Orange", "Donkey"];
console.log(fruits[0]);
但我没有取得多大进展。我意识到这可能更像是一个JS /"理解对象/数组"问题,所以我会感谢任何帮助 - 包括我可以解决的资源参考。