Question

我想像这个例子一样创建一个图表： Population pyramid

但没有滑动;无需调整年份或任何事情。这大致是我的数据集：

category,subcategory,benchmark,completes,difference
household income,"Less than $30,000",33.7,27.4,6.3
household income,"$30,000 to $74,000",31.6,36.3,4.7
household income,"$75,000 to $124,999",20.3,22.4,2.1
household income,"$125,000 Plus",14.2,13.9,0.3

我希望有一个透明的条形基础，以及一个完整的透明条（以便可以看到它们之间的差异）

我遇到问题的地方是在每个地方放置两个地方＆＃39;容器

// G containers for subcategory bars
    subcat = svg.selectAll('.subcat')
        .data(data)
        .enter().append('g')
        .attr('class','subcat')
        .attr('transform', function(d) {
            return 'translate(' + x(d.subcategory) + ', 0)';
        });

    subcat.selectAll('.bar')
        .data(data)
        .enter().append('rect')
        .attr('class','bar')
        .attr('width', x.rangeBand())
        .attr('y', function(d) { return y(d.benchmark); })
        .attr('height', function(d) { return height - y(d.benchmark); });

我不太了解选择的data（）方法，因此我的问题。我已经阅读过有关密钥，条目和汇总的内容，我认为这可能是寻找解决方案的可能位置。

我使用的大多数D3示例都为每列使用一个数据，因此数据绑定是有意义的。在这种情况下，我想在每列中放两个条，因此我不清楚数据绑定过程。

任何帮助都将不胜感激。

如何在D3条形图中创建重叠的透明条形图？

0 个答案: