Bars not hidding properly

Question

I am trying to plot the following bar chart with overlapping bars.

This is what I get:

One of the colours remains transparent when I plot it and I do not see were my error is. Could someone help?

Please check the plunker for the complete code, css file and csv file where the data comes from:

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

The code for the chart is here:

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);

This is a new question coming from:

Overlapping bars in c3 (v4) bar chart

Aditya Aditya · Accepted Answer · 2018-05-23T12:49:29

You were selecting the wrong classes while selecting the path elements and appending new rects.

The classes you should be selecting are .c3-shapes-Attempted and .c3-shapes-Passed. You can check what classes to select from the console.

Here's the plunker with those changes

Bars not hidding properly

1 Answers