d3js:d3.nest - 在DOM中操作数据

时间:2014-10-04 15:43:49

标签: d3.js

我正在努力改变这个population pyramid by Mike Bostock。我的数据与他的数据一样,是一个CSV,其中男性/女性人群分布在不同的"" (他是年龄组,我的是地区)多年。

我的问题涉及数组如何在DOM中工作。最初,在调用我的CSV并执行console.log(dataset)后,我的数据如下所示:

enter image description here

也就是说,对于每个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))中看起来像这样:

enter image description here

这看起来也不错 - 我的数据现在由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 /"理解对象/数组"问题,所以我会感谢任何帮助 - 包括我可以解决的资源参考。

0 个答案:

没有答案