Javascript d3分组图表1级不循环

我正在尝试创建这样的分组图表：

这是我目前的代码：

    var width = "100%";
    var height = "96vh";


    var canvas = d3.select("body")
                   .append('svg')
                   .attr('width',width)
                   .attr('height', height)
                   .style("border", "2px solid black");

    var canvasWidth= parseInt(canvas.style("width"));
    var canvasHeight= parseInt(canvas.style("height"));

    var y0  = d3.scaleBand()
                .paddingInner(0.1)
                .rangeRound([0, canvasHeight]); 

    var y1 = d3.scaleBand()
               .padding(0.08);  

    var x = d3.scaleLinear()    
              .range([0, canvasWidth]);

    var z = d3.scaleOrdinal()
            .range(["blue","green"])

    d3.csv("data.csv", data =>{
        console.log(data);

        //inner columns domain
        var keys = d3.keys(data[0]).slice(1,4); 

        data.forEach(d=>{
            d.properties = keys.map(key => {return {key:key, value:+d[key]}})
        });

        //console.log(data[1].properties);

        var max = d3.max(data, d=>d['Open rate'])

        x.domain([0,max]);
        y0.domain(data.map(d => d.Industry));
        y1.domain(keys).rangeRound([0,y0.bandwidth()]); 

        console.log(x(data[1].properties[1].value))

        console.log(keys);


        var all= canvas.append("g")
                  .selectAll("g")
                  .data(data)
                  .enter()
                  .append("g")
                  .attr("transform", d => {"translate(0, "+ y0(d.Industry) + ")"}); 
        //console.log(y0(data[1].Industry));          

        all .selectAll("rect")
            .data(d=>d.properties)
            .enter()
            .append("rect")
            .attr("y", d=>y1(d.key))
            .attr("x", 0)
            .attr("height", y1.bandwidth())
            .attr("width", d =>x(d.value));



    }); 

这就是目前的结果。（我不知道如何显示结果，因为我正在处理本地文件）

除图表组的y平移外，所有条形图都被映射：

.attr（“transform”，d=>{“translate（0），+y0（d.Industry）+”）没有发生

这是对应的html（显示除y翻译外的所有内容看起来都很好）：

变换函数应该返回字符串，但大括号混淆了箭头函数

> (d => "Hello, " + d)("World!")  // without braces
'Hello, World!'

> (d => {"Hello, " + d})("World!")  // with braces
undefined

> (function(d) {return "Hello, " + d;})("World!")  // function
'Hello, World!'

我怀疑arrow函数试图构建一个要返回的对象，但是语法错误（没有key:val对）——因此它返回的是
undefined
。如果删除大括号或使用函数，它应该可以正常工作。
您可以发布几行数据吗？这样更容易调试。
> (d => "Hello, " + d)("World!")  // without braces
'Hello, World!'

> (d => {"Hello, " + d})("World!")  // with braces
undefined

> (function(d) {return "Hello, " + d;})("World!")  // function
'Hello, World!'