Javascript 无法使用onclick函数在d3中的堆叠条形图中的每个条形的堆栈上绘制矩形

我正在创建一个堆叠条形图，其中每个条形图的堆栈分别表示状态——“打开”、“在制品”。我的要求是，触发每个条形图堆栈上的单击事件时，应显示3个矩形，分别表示“sev高”、“sev低”、“sev中”和各自的计数……这意味着单击每个表示“状态”的堆栈，该状态的总计数将被拆分为3条，显示该特定状态的“sev高”、“sev低”、“sev中”。但在这里，我无法在单击堆栈后绘制矩形…请查看我的代码并建议我

这是我的密码

 var data=[{"comp_catgry":"A","age":"0-5","status":"open","sev":"high","cnt":"40"}
  ,{"comp_catgry":"A","age":"0-5","status":"open","sev":"low","cnt":"10"}
  ,{"comp_catgry":"A","age":"0-5","status":"open","sev":"medium","cnt":"20"}
  ,{"comp_catgry":"A","age":"0-5","status":"wip","sev":"high","cnt":"40"}
  ,{"comp_catgry":"A","age":"0-5","status":"wip","sev":"low","cnt":"40"}
  ,{"comp_catgry":"A","age":"0-5","status":"wip","sev":"medium","cnt":"20"}
  ,{"comp_catgry":"A","age":"6-10","status":"open","sev":"high","cnt":"40"}
  ,{"comp_catgry":"A","age":"6-10","status":"open","sev":"low","cnt":"40"}
  ,{"comp_catgry":"A","age":"6-10","status":"open","sev":"medium","cnt":"40"}
  ,{"comp_catgry":"A","age":"6-10","status":"wip","sev":"high","cnt":"30"}
  ,{"comp_catgry":"A","age":"6-10","status":"wip","sev":"low","cnt":"40"}
  ,{"comp_catgry":"A","age":"6-10","status":"wip","sev":"medium","cnt":"10"}
  ,{"comp_catgry":"B","age":"0-5","status":"open","sev":"high","cnt":"40"}
  ,{"comp_catgry":"B","age":"0-5","status":"open","sev":"low","cnt":"50"}
  ,{"comp_catgry":"B","age":"0-5","status":"open","sev":"medium","cnt":"40"}
  ,{"comp_catgry":"B","age":"0-5","status":"wip","sev":"high","cnt":"40"}
  ,{"comp_catgry":"B","age":"0-5","status":"wip","sev":"low","cnt":"40"}
  ,{"comp_catgry":"B","age":"0-5","status":"wip","sev":"medium","cnt":"30"}
  ,{"comp_catgry":"B","age":"6-10","status":"open","sev":"high","cnt":"40"}
  ,{"comp_catgry":"B","age":"6-10","status":"open","sev":"low","cnt":"40"}
  ,{"comp_catgry":"B","age":"6-10","status":"open","sev":"medium","cnt":"40"}
  ,{"comp_catgry":"B","age":"6-10","status":"wip","sev":"high","cnt":"20"}
  ,{"comp_catgry":"B","age":"6-10","status":"wip","sev":"low","cnt":"40"}
  ,{"comp_catgry":"B","age":"6-10","status":"wip","sev":"medium","cnt":"30"}
  ]

    var margin = {top: 20, right: 20, bottom: 30, left: 40},
     width = 760 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;

     var x = d3.scale.ordinal()
     .rangeRoundBands([0, width], .1);

     var y0 = d3.scale.ordinal()
    .rangeRoundBands([height, 0], .2);

     var y1 = d3.scale.linear();

     var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

     var xAxis = d3.svg.axis()
     .scale(x)
     .orient("bottom")

     var svg = d3.select("body").append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
     .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

     var nestedData = d3.nest()
     .key(function(d) {return d.comp_catgry;})
     .key(function(d) {return d.age;})
     .key(function(d) {return d.status;})
     .entries(data);

    console.log(nestedData);
    var maxTotal = 0; 
    nestedData.forEach(function(catGroup) {
    catGroup.ctgry = catGroup.key;
    catGroup.values.forEach(function(ageGroup){
    ageGroup.age = ageGroup.key;
    ageGroup.bars=[];
    var total1=0;
    ageGroup.values.forEach(function(stsGroup){
    stsGroup.sts=stsGroup.key;
    var total = 0;
    stsGroup.bars = [];
    stsGroup.values.forEach(function(d){
    stsGroup.bars.push(
        {ctgry:catGroup.ctgry,
        age:ageGroup.age,
         status:d.status,
        // type: "open",
         sev:d.sev,
         cnt1:d.cnt,
         z0: total, 
         z1: (total = total + (+d.cnt) ) 
        }
        );
    })
    ageGroup.bars.push({
    ctgry:catGroup.ctgry,
    age:ageGroup.age,
    status:stsGroup.key,
    y0:total1,
    y1:(total1 = total1 + total)
    }
    );
        maxTotal = Math.max(maxTotal, total1); 
    });
    });
    });


   x.domain( nestedData[0].values.map(function(d){return d.age;}) );

   y0.domain(nestedData.map(function(d) { return d.key; }));
   y1.domain([0, maxTotal]).range([y0.rangeBand(), 0]);

   svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis);


   var dateGroups = svg.selectAll("dateGroups")
   .data(nestedData)
   .enter()
   .append("g")
   .attr("class", "dateGroups")
   .attr("transform", function(d) { return "translate(60," + y0(d.key) + ")"; });



   dateGroups.append("text")
   .attr("class", "group-label")
   .attr("x", -76)
   .attr("y", function(d) { return y0(d.values[0].value / 4); })
   .attr("dy", ".35em")
   .text(function(d) { return "Complaint Category " + d.key; })


   var ageGroups = dateGroups.selectAll("ageGroups")
   .data(function(d,i){console.log(nestedData[i].values); return nestedData[i].values;})
   .enter()
   .append("g")
   .attr("class", "ageGroups")


   var bars = ageGroups.selectAll("rect")
   .data( function(d) {console.log(d.bars); return d.bars;})
   .enter().append("rect")
   .attr("id",function(d,i){return "Cust_"+i ;}) 
   .attr("y", function(d){
   return y1(d.y1);} )
   .attr("height", function(d){return Math.abs( y1(d.y1) - y1(d.y0) ); } )
   .attr("height", function(d) { return y0.rangeBand() - (Math.abs( y1(d.y1) - y1(d.y0) )); })   
   .attr("x", function(d,i){return x(d.age);})
   .attr("width", x.rangeBand() )

   .style("fill", function(d) { return color(d.status); })
   /* .append("title") 
    .text(function(d) {
        return ("Age Bucket-"+d.age + ", " +d.status +":" + d.count);
    })*/

   .on("click", function(d,i){
    alert(1)
    var bb = ageGroups.append("g").selectAll("rect").data( function(d) {console.log(d.values[i]); return d.values[i];})
          .enter();
          alert(2)
          bb.append("rect")
          .attr("id","rectId")
          .attr("x",50)
          .attr("Y",50)
          .attr("height",function(d,i){ alert(3);console.log(d.bars[i].sev);return d.bars[i].sev;})
          .attr("width",10)
          .style("fill","red")
          .style("visibility", "visible");
         });  

---

这是我的小提琴…请参考并帮助我…请告诉我哪里出了问题…这样就无法绘制矩形。。。。