d3.js - 条形图未显示在分组条形图中

Question

我正在尝试创建一个分组条形图，显示学生出勤率（出席或缺席），但由于某些原因，我的图表只显示一组条形图（最高代表出席，最高代表缺席。在检查控制台时，我看到剩下的柱子在那里，但它们没有出现在图表上。我不知道问题是我的数据还是我的代码（我只包含了代码的 js 部分）

const SVG = {
    height: 900,
    width: 900
}
const margin = {top: 40, bottom: 40, right: 40, left: 40};
const innerWidth = SVG.width - margin.left - margin.right;
const innerHeight = SVG.height - margin.top - margin.bottom;

const bar = d3.select('body').append('svg').attr('width', SVG.width).attr('height', SVG.height);
const grp = bar.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`);

const data = d3.csv('WEEK.csv')
.then(
function(data) {
console.log(data);
const keys = data.columns.slice(1);
console.log(keys)
const group = d3.map(data, function(d){return +d.Week}).keys()
const x0 = d3.scaleBand().domain(group)
                            .range([0, innerWidth]).padding(0.1)
const x1 = d3.scaleBand().domain(keys)
                            .range([0, x0.bandwidth()]).padding(0.05)
const y0 = d3.scaleLinear().domain([0, d3.max(data, function(d) {return d3.max(keys, function (key){return +d[key];} 
                            )})])
                        .range([innerHeight, 0]);
const color = d3.scaleOrdinal().range('#fcba03', '#eb4034')
const yAxis = d3.axisLeft(y0);
const xAxis = d3.axisBottom(x0);

const yAxisG = grp.append('g').call(yAxis)
const xAxisG = grp.append('g').call(xAxis)
        .attr('transform', `translate(0, ${innerHeight})`);
    
 grp.append('g')
    .selectAll('g')
    .data(data)
    .enter().append('g')
    .selectAll('rect')
        .attr("transform", function(d) {return "translate(" + x0(+d.Week) + ",0)"})
    .data(function(d){return keys.map(function(key){return{key: key, value: +d[key]} }) })
    .enter()
    .append('rect')
        .attr('width', x1.bandwidth())
        .attr('height', d => (innerHeight - y0(d.value)))
        .attr('y', d => y0(d.value))
        .attr('x', d => x1(d.key))
        .attr('fill', d => color(d.key));  
})

数据集：Week ,Present,Absent 2,10481,4010 3,11277,4551 4,10499,5036 5,9970,5126 6,8901,4909 7,7929,8405 8,7995,5062 9,7785,5447 10, 7670,5822 11,7177,6162 12,6258,6499 13,4689,6631

标签： d3.js