在D3 StackBar图表中分组

Question

这是我的图表代码。我得到A Stack Bar Char但我需要为我的X-a xis标签分组。有人可以帮我吗？

这是我的图表

我的图表代码

var serie = g.selectAll(".serie")
  .data(stack.keys(keys)(data))
  .enter().append("g")
  .attr("class", "serie")
  .attr('fill', d => this.z(d.key));
var tooltip = d3.select("#stackBarChart").append("div").attr("class", "toolTip").style("display", "none");;
serie.selectAll("rect")
  .data(d => d)
  .enter().append("rect")
  .attr('x', d => this.x(d.data.State))
  .attr('y', d => this.y(d[1]))
  .attr('height', d => this.y(d[0]) - this.y(d[1]))
  .attr('width', this.x.bandwidth())
  ;
g.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(this.x))
  .selectAll("text")
  //.call(this.wrap, this.x.bandwidth())
  .style("font-size", "11px")
  .attr("transform", "rotate(-45)")
  .style("text-anchor", "end")
 // .attr("dx", "-.1em");
g.append("g")
  .attr("class", "axis axis--y")
  .call(d3.axisLeft(this.y).ticks(10, "%"))
  .append("text")
  .attr('y', this.y(this.y.ticks().pop()) + 0.5)
  .attr('font-weight', 'bold')
  .attr('text-anchor', 'start');

如何根据类别对X轴进行分组？

数据：

[{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"10","CategoryName":"Algebra 1","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":198,"Level2Numerator":107,"Level3Numerator":151,"Level4Numerator":28,"Level5Numerator":22,"Denominator":506,"Level1Percentage":39.130434782608,"Level2Percentage":21.146245059288,"Level3Percentage":29.841897233201,"Level4Percentage":5.533596837944,"Level5Percentage":4.347826086956},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"10","CategoryName":"English Language Arts","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":778,"Level2Numerator":1173,"Level3Numerator":1140,"Level4Numerator":1183,"Level5Numerator":677,"Denominator":4951,"Level1Percentage":15.713997172288,"Level2Percentage":23.692183397293,"Level3Percentage":23.025651383558,"Level4Percentage":23.894162795394,"Level5Percentage":13.674005251464},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"10","CategoryName":"Geometry","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":501,"Level2Numerator":429,"Level3Numerator":769,"Level4Numerator":223,"Level5Numerator":84,"Denominator":2006,"Level1Percentage":24.975074775672,"Level2Percentage":21.385842472582,"Level3Percentage":38.334995014955,"Level4Percentage":11.116650049850,"Level5Percentage":4.187437686939},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"10","CategoryName":"Social Studies","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":57,"Level2Numerator":66,"Level3Numerator":109,"Level4Numerator":105,"Level5Numerator":106,"Denominator":443,"Level1Percentage":12.866817155756,"Level2Percentage":14.898419864559,"Level3Percentage":24.604966139954,"Level4Percentage":23.702031602708,"Level5Percentage":23.927765237020},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"11","CategoryName":"Algebra 1","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":78,"Level2Numerator":27,"Level3Numerator":45,"Level4Numerator":15,"Level5Numerator":13,"Denominator":178,"Level1Percentage":43.820224719101,"Level2Percentage":15.168539325842,"Level3Percentage":25.280898876404,"Level4Percentage":8.426966292134,"Level5Percentage":7.303370786516},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"11","CategoryName":"Geometry","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":212,"Level2Numerator":88,"Level3Numerator":65,"Level4Numerator":9,"Level5Numerator":3,"Denominator":377,"Level1Percentage":56.233421750663,"Level2Percentage":23.342175066312,"Level3Percentage":17.241379310344,"Level4Percentage":2.387267904509,"Level5Percentage":0.795755968169},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"11","CategoryName":"Social Studies","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":340,"Level2Numerator":541,"Level3Numerator":881,"Level4Numerator":985,"Level5Numerator":1344,"Denominator":4091,"Level1Percentage":8.310926423857,"Level2Percentage":13.224150574431,"Level3Percentage":21.535076998288,"Level4Percentage":24.077242727939,"Level5Percentage":32.852603275482},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"12","CategoryName":"Algebra 1","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":4,"Level2Numerator":2,"Level3Numerator":5,"Level4Numerator":0,"Level5Numerator":0,"Denominator":11,"Level1Percentage":36.363636363636,"Level2Percentage":18.181818181818,"Level3Percentage":45.454545454545,"Level4Percentage":0.000000000000,"Level5Percentage":0.000000000000},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"12","CategoryName":"Geometry","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":38,"Level2Numerator":7,"Level3Numerator":11,"Level4Numerator":1,"Level5Numerator":1,"Denominator":58,"Level1Percentage":65.517241379310,"Level2Percentage":12.068965517241,"Level3Percentage":18.965517241379,"Level4Percentage":1.724137931034,"Level5Percentage":1.724137931034},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"12","CategoryName":"Social Studies","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":12,"Level2Numerator":15,"Level3Numerator":24,"Level4Numerator":21,"Level5Numerator":28,"Denominator":100,"Level1Percentage":12.000000000000,"Level2Percentage":15.000000000000,"Level3Percentage":24.000000000000,"Level4Percentage":21.000000000000,"Level5Percentage":28.000000000000},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"9","CategoryName":"Algebra 1","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":955,"Level2Numerator":392,"Level3Numerator":860,"Level4Numerator":234,"Level5Numerator":78,"Denominator":2519,"Level1Percentage":37.911869789599,"Level2Percentage":15.561730845573,"Level3Percentage":34.140531957125,"Level4Percentage":9.289400555776,"Level5Percentage":3.096466851925},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"9","CategoryName":"English Language Arts","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":926,"Level2Numerator":1066,"Level3Numerator":1114,"Level4Numerator":1104,"Level5Numerator":695,"Denominator":4905,"Level1Percentage":18.878695208970,"Level2Percentage":21.732925586136,"Level3Percentage":22.711518858307,"Level4Percentage":22.507645259938,"Level5Percentage":14.169215086646},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"9","CategoryName":"Geometry","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":66,"Level2Numerator":124,"Level3Numerator":504,"Level4Numerator":430,"Level5Numerator":424,"Denominator":1548,"Level1Percentage":4.263565891472,"Level2Percentage":8.010335917312,"Level3Percentage":32.558139534883,"Level4Percentage":27.777777777777,"Level5Percentage":27.390180878552},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"9","CategoryName":"Social Studies","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":8,"Level2Numerator":2,"Level3Numerator":5,"Level4Numerator":2,"Level5Numerator":0,"Denominator":17,"Level1Percentage":47.058823529411,"Level2Percentage":11.764705882352,"Level3Percentage":29.411764705882,"Level4Percentage":11.764705882352,"Level5Percentage":0.000000000000},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"Overall","CategoryName":"Algebra 1","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":1235,"Level2Numerator":528,"Level3Numerator":1061,"Level4Numerator":277,"Level5Numerator":113,"Denominator":3214,"Level1Percentage":38.425637834474,"Level2Percentage":16.428126944617,"Level3Percentage":33.011823273179,"Level4Percentage":8.618543870566,"Level5Percentage":3.515868077162},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"Overall","CategoryName":"English Language Arts","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":1704,"Level2Numerator":2239,"Level3Numerator":2254,"Level4Numerator":2287,"Level5Numerator":1372,"Denominator":9856,"Level1Percentage":17.288961038961,"Level2Percentage":22.717126623376,"Level3Percentage":22.869318181818,"Level4Percentage":23.204139610389,"Level5Percentage":13.920454545454},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"Overall","CategoryName":"Geometry","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":817,"Level2Numerator":648,"Level3Numerator":1349,"Level4Numerator":663,"Level5Numerator":512,"Denominator":3989,"Level1Percentage":20.481323640010,"Level2Percentage":16.244672850338,"Level3Percentage":33.817999498621,"Level4Percentage":16.620706944096,"Level5Percentage":12.835297066934},{"IsDistrictData":1,"SchoolName":"District","StudentGradeLevel":"Overall","CategoryName":"Social Studies","SchoolYearHyphenated":"2016-17","AdditionalGroupValue":"","Level1Numerator":417,"Level2Numerator":624,"Level3Numerator":1019,"Level4Numerator":1113,"Level5Numerator":1478,"Denominator":4651,"Level1Percentage":8.965813803483,"Level2Percentage":13.416469576435,"Level3Percentage":21.909266824338,"Level4Percentage":23.930337561814,"Level5Percentage":31.778112233928}]

我想使用"Categoryname"进行分组，并使用

显示标签名称

"AdditionalGroupValue"

我想要这样的图表