C3.js重叠柱状图显示异常：单个颜色始终透明

我最近尝试用C3绘制带有重叠效果的柱状图，实际生成的图表如下：

但现在遇到个棘手的问题——图表里其中一个颜色始终处于透明状态，我反复检查代码都定位不到问题所在，有没有能帮忙排查的朋友呀？

核心的图表代码我贴在下面了，完整的代码、CSS文件和CSV数据源原本有在线预览资源，但这里没法跳转，就先放核心实现代码：

var data = [] 
function loadData(){ 
    d3.csv('data.csv', function(error, data) { 
        f2(data); 
    }); 
} 
loadData() 

function f2(data){ 
    var Passed_students = c3.generate({ 
        bindto: '#passed_subjects', 
        data: { 
            type: 'bar', 
            json: data, 
            keys: { 
                x: 'AC_YEAR', 
                value: ['Attempted','Passed'] 
            }, 
            groups: [ ['Attempted', 'Passed'] ] 
        }, 
        axis: { 
            y: { 
                label: { 
                    text: "Number of subjects", 
                    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 
            } 
        } 
    }); 
    updateChart(); 
} 

function updateChart(){ 
    var totalSubjects = [] 
    var passSubjects = [] 
    d3.selectAll('.c3-shapes-Total-subjects>path').attr('temp', function(d) { 
        totalSubjects.push(d3.select(this).node().getBBox()) 
    }); 
    d3.selectAll('.c3-shapes-Passed-subjects>path').attr('temp', function(d) { 
        passSubjects.push(d3.select(this).node().getBBox()) 
    }); 
    d3.selectAll('.c3-shapes-Total-subjects').selectAll('rect').data(totalSubjects).enter().append('rect') 
        .attr('width', function(d) { return d.width - 15; })
        .attr('x', function(d, i) { return d.x - ((d.width - 15 - passSubjects[i]['width']) / 2); })
        .attr('y', function(d, i) { return passSubjects[i]['y'] - (d.height - passSubjects[i]['height']); })
        .attr('height', function(d) { return d.height; })
        .attr('fill', 'steelblue'); 
    d3.selectAll('.c3-shapes-Passed-subjects').selectAll('rect').data(passSubjects).enter().append('rect')
        .attr('x', function(d, i) { return d.x; })
        .attr('width', function(d) { return d.width; })
        .attr('y', function(d) { return d.y; })
        .attr('height', function(d) { return d.height; })
        .attr('fill', 'orange') 
        .attr('opacity', '0.25'); 
} 

setTimeout(function(){ 
    document.getElementById("Passed_subjects").hidden=true; 
},750); 

这个问题衍生自Stack Overflow上关于「C3 (v4) 柱状图实现重叠」的相关讨论。

内容的提问来源于stack exchange，提问作者MTT