Question

我正在尝试使用重叠条形图以下条形图。

这就是我得到的：

当我绘制它时，其中一种颜色保持透明，我不知道我的错误是什么。有人可以帮忙吗？

请检查plunker以获取数据来源的完整代码，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

Answer 1

您在选择path元素并添加新rects时选择了错误的类。

您应该选择的课程是.c3-shapes-Attempted和.c3-shapes-Passed。您可以从控制台中查看要选择的类。

这里有plunker这些更改

酒吧没有正确隐藏

1 个答案: