javascript - 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 否则会更改 bars 的 width本来可以更容易。

我首先使用 d3.select(**bars**).node().getBBox() 和然后调整 y 和 width Total women 和 Total men bars according to y Passed women 和 Passed men 的属性，因为我们想重叠它们。

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

这是完整的 fiddle或 plunkr