c3 (v4) 条形图中的重叠条形图

Question

我想参考上一个问题：

stacked bar chart with overlapping bars C3js

但是，我唯一的问题是我想重叠列以显示（作为示例）4 名学生中有 3 名通过了该科目。现在我有一个高度为 3 的条，顶部有一个高度为 4 的条，这使它成为 7，我想要一个 4 的条与一个 3 的条重叠。如何更改我的代码？谢谢：

        <div id="chart3"></div>
        <script>
            var chart = c3.generate({
                bindto: '#chart3',
                data: {
                    url: '../static/CSV/Chart_data/number_students.csv,
                    x:'AC_YEAR',
                    type: 'bar',
                    groups: [
                        ['Total women', 'Passed women'],
                        ['Total men', 'Passed men']
                    ],
                },
                axis: {
                    y: {
                        label: {
                            text:"Number of students",
                            position: "outer-middle"
                        },
                    },
                    x: {
                        label: {
                            text:"Year",
                            position: "outer-center"
                        },
                    }
                },
                size: {
                    height: 400,
                    width: 800
                },
                bar:{
                    width:{ratio:0.7}
                },
                legend: {
                        show: true,
                        position: 'inset',
                        inset: {
                            anchor: 'top-right',
                            x: 10,
                            y: 5,
                            step: 2
                        }
                    }        
            }); 
        </script>

csv 文件 number_students 是：

AC_YEAR,Passed women,Passed men,Total women,Total men
2010,72,239,98,315
2011,77,227,83,276
2012,65,226,93,298
2013,54,215,77,283
2014,63,233,88,294
2015,49,205,64,267

当前是这样的：

我想要的应该重叠，例如在 2010 年，我们只会看到一点绿色（7 名没有通过的女学生），因为前面的蓝色只比绿色少 7 个单位.而在右边的 29 个单位的红色（没有通过的男学生）。

Answer 1

我以前从未与c3 合作过，所以我不知道c3 中是否有任何图表可以特别做到这一点。我可以通过使用d3 来解决这个问题。

首先c3 使用path 代替rects 用于条形，否则更改条形的width 可能会更容易。

我所做的是首先使用d3.select(**bars**).node().getBBox()将所有四个类别的条形的所有维度存储到四个不同的数组中，然后根据@调整Total women和Total men条形的y和width Passed women 和 Passed men 的 987654336@ 属性，因为我们想将它们重叠。

然后隐藏由c3 创建的所有path 元素，然后将所有这些包装在一个函数中，以便在用户调整浏览器窗口大小时调用。

这是完整的fiddle 或plunkr