Бары не прячутся должным образом

Question

Я пытаюсь построить следующую гистограмму с перекрывающимися барами.

Это то, что я получаю:

Один из цветов остается прозрачным, когда я строю его, и я не вижу, были ли моиошибкаМожет ли кто-нибудь помочь?

Пожалуйста, проверьте плункер для полного кода, 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);

Это новый вопрос от:

Перекрывающиеся бары на гистограмме c3 (v4)

Answer 1

Вы выбрали неправильные классы, выбирая элементы path и добавляя новые rects.

Выбираемые классы: .c3-shapes-Attempted и .c3-shapes-Passed.Вы можете проверить, какие классы выбрать из консоли.

Вот plunker с этими изменениями