d3js：将 CSV 行配对为“g”元素

Question

我正在重新创建this population pyramid by Mike Bostock。我有一个关于.data() 工作原理的基本问题。

我在 CSV 文件中有这样的数据：

所以，我有每个 region（dodoma、arusha 等）中的男性和女性人数。按照 Mike 的示例，我想创建一个条形图，其中男性和女性占据不同的 rects，与 80% 的 opacity 重叠。我希望region 成为我的 x 轴，人数成为我的 y 轴。这是我的 x 轴和 y 轴刻度：

        var x = d3.scale.ordinal()
                .rangeRoundBands([0, w], 0.05);

        var y = d3.scale.linear()
                .range([0, h-padding]);

这是我在每个地区对男性+女性进行分组的尝试：

        var regions = svg.append("g")
            .classed("regions", true);

          var region = regions.selectAll(".region")
                .data(dataset)
                .enter()
                .append("g")
                .attr("class", "region")
                .attr("transform", function(region) { return "translate(" + x(region) + ",0)"; });

              region.selectAll("rect")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("x", function(d, i) {
                  return x(i);
                })
                .attr("y", function(d) { return h - y(d.people_0); })
                .attr("width", barWidth)
                .attr("height", function(d) { return y(d.people_0); });

我最终得到了这个：

也就是说，我最终得到了 50 个 g 元素，它们具有所有数据，并且正在为每个性别区域对创建完整的条形图（来自 Dodoma 的男性，来自 Dodoma 的女性; 来自 Tanga 的男性、来自 Tanga 的女性等）。整个图表因此被重绘了 50 次。我有 25 个地区，所以我想要 25 个 g 元素，只有该地区的男性/女性号码。

我认为这一切都可以与.data() 联系起来。但我不知道如何告诉 d3 我想按区域对我的观察结果进行分组，最后得到 2 个rects 每g。

Here's my JSFiddle（虽然我不知道如何加载我的外部数据 - 所以什么都没有显示；任何提示都将不胜感激）。

编辑添加：

鉴于 Benjamin 的评论，我尝试使用 .nest。所以我有：

      dataset = d3.nest()
          .key(function(d) { return d.round; })
          .key(function(d) { return d.region; })
          .rollup(function(v) { return v.map(function(d) { return d.people_0; }); })
          .map(dataset);

现在我像这样打电话给我的rects：

              region.selectAll("rect")
                .data(function(region) { return data[round][region]; })
                .enter()
                .append("rect")
                .attr("x", function(d, i) {
                  return x(i);
                })
                .attr("y", function(d) { return h - y(d.people_0); })
                .attr("width", barWidth)
                .attr("height", function(d) { return y(d.people_0); });

运气不好。 FWIW，console.log(dataset) 向我展示了数据确实已被汇总。但我仍然无法调用它并将其与我的 g.region 元素关联。

有人能解释一下data[round][region] 的作用吗？我不明白 d3 是如何解释这个的。

Answer 1

有几种方法可以做到这一点。我的方法是为数据创建一个两级嵌套，按地区然后按性别：

dataset = d3.nest()
    .key(function(d) {
        return d.region;
    })
    .sortKeys(d3.ascending)
    .key(function(d) {
        return d.sex;
    })
    .entries(dataset);

这将为您提供一个以后易于使用的结构，如下所示：

key: "dodoma"
    values: 
        key: "female"
        values: 
            people_0: "43"
            region: "dodoma"
            sex: "female"
        key: "male
        values: 
            people_0: "77"
            region: "dodoma"
            sex: "male"
key: "killimanj"
    values: ...

这很冗长，可以稍微简化一下（例如使用.map）。 This is a great nest tutorial page 了解更多信息。

从那时起，只需进行一些更改即可绘制您的rects。看到这个plunk：http://embed.plnkr.co/PPLbQER4FERA6D7T4m9P/preview。

如果你想顺便链接外部数据，Plunker (http://plnkr.co/) 是 jsfiddle 的一个很好的替代品。

一些更改与 Mike 的原始示例有所不同，包括在 CSS 中使用 class="male" \ "female" 来获得蓝色 \ 粉红色，而不是使用 rect:first-child

Answer 2

http://bost.ocks.org/mike/selection/ 解释了数据在 d3 中是如何工作的。如果您调用它一次，它会将每个数据条目“绑定”到您指定的元素。

在你的情况下，你必须按区域嵌套（），你会得到一个看起来像这样的对象数组：

['regionA' : [{region, sex, people}, {region, sex, people}], 'regionB' : [{region, sex, people}, {region, sex, people}]

然后您对数据进行两次迭代。所以你首先调用.data()（这次它是一个区域数组，即regionA）并将它绑定到一个名为region的组上 然后在矩形上再次绑定data()（这次是一个区域的对象数组，即[{region, sex, people}, {region, sex, people}]）。