Javascript d3.js多维数据分组条形图

我试图在d3.js v5中创建分组条形图，但仍然停留在迭代多维数据上。不幸的是，我没有找到任何符合我需要的例子。 我的数据：

结果我预期：2001年、2002年、2003年X轴上。每年6根钢筋-所有钢筋对控制行业

因此，我创建了子组、svg、axis，它们都很好：

let subgroups = ['country', 'industry'];
let margin = {top: 30, right: 30, bottom: 30, left: 30};
let width = 600;
let height = 400;

let svg = d3.select("#mychart")
            .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 + ")");

let xBar = d3.scaleBand()
            .domain(data.map(function(d) { return d.year; }))
            .rangeRound([0, width])
            .padding([0.2]);
svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(xBar));
let yBar = d3.scaleLinear()
            .domain([0, d3.max(data, function(d) { return +d.value; })])
            .rangeRound([ height, 0 ]);
svg.append("g")
            .call(d3.axisLeft(yBar));

let xBarSubgroup = d3.scaleBand()
            .domain(subgroups)
            .range([0, xBar.bandwidth()])
            .padding([0.05]);

但可见的结果是每年只有1个酒吧：所有6个酒吧都在一个地方：

svg.selectAll(".bar")
            .data(data)
            .enter().append("g")
            .attr("transform", function(d) {
                return "translate(" + xBar(d.year) + ",0)";
            })
            .selectAll("rect")
            .data(function(d) {
                return subgroups.map(function(key) {
                    return {key: d[key], value: d.value};
                });
            })
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return xBarSubgroup(d.key); })
            .attr("y", function(d) { return yBar(d.value); })
            .attr("width", xBarSubgroup.bandwidth())
            .attr("height", function(d) {
                return height - yBar(d.value);
            });

这是

可能我错过了thansform的某个地方，还需要设置酒吧的宽度。 请帮忙

svg.selectAll(".bar")
            .data(data)
            .enter().append("g")
            .attr("transform", function(d) {
                return "translate(" + xBar(d.year) + ",0)";
            })
            .selectAll("rect")
            .data(function(d) {
                return subgroups.map(function(key) {
                    return {key: d[key], value: d.value};
                });
            })
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return xBarSubgroup(d.key); })
            .attr("y", function(d) { return yBar(d.value); })
            .attr("width", xBarSubgroup.bandwidth())
            .attr("height", function(d) {
                return height - yBar(d.value);
            });