钢筋未正确铺设

我正试图用重叠的条形图绘制下面的条形图。

这就是我得到的:

当我绘制它时,其中一种颜色仍然是透明的,我看不出我的错误是什么。 有人能帮忙吗?

请检查Plugker以获取完整的代码、CSS文件和数据来源的csv文件:

https://plnkr.co/edit/gaxdwbqaDrfJ67oo8gnO?p=preview

图表代码如下:

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']

        },
        /* x: ['AC_YEAR'], */
        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);

这是一个新问题,来自:

Overlapping bars in c3 (v4) bar chart