D3.js 在D3上分组条形图的每个条形下添加标签

我对D3还比较陌生，正在尝试向分组条形图添加标签。。通过下面的实现，我只能在一个组下看到它们，而不是在两个组下看到它们

以下是数据在数据库中的外观：

类别、超出、完全满足、部分满足、不满足 商业，10,20,30,30 领导力，15,5,30,50

代码如下：

    var chart1 = d3.select("#svgarea2"),
                 margin = { top: 70, right: 0, bottom: 30, left: 40 },
                 width = +chart1.attr("width") - margin.left - margin.right,
                 height = +chart1.attr("height") - margin.top - margin.bottom,
                 g = chart1.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        //chart background color
        var bg = d3.select("g").append("svg")
           // .attr("width", width + margin.right + margin.left)
            .attr("width", 510 + "px")
           // .attr("height", height + margin.top + margin.bottom);
            .attr("height", 310 + "px");

        bg.append("rect")
            .attr("width", "100%")
            .attr("height", "100%")
            .attr("fill", "#f8f8ff");

        bg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        //scale chart
        var x0 = d3.scaleBand()
            .rangeRound([0, width])
            .paddingInner(0.4);

        var x1 = d3.scaleBand()
            .padding(0.05);

        var y = d3.scaleLinear()
            .rangeRound([height, 0]);

        var z = d3.scaleOrdinal() //d3.schemeCategory20
         //   .range(["#0000ff", "#dcdcdc", "#696969", "#00008b"]);
        .range(["#00008b", "#696969", "#dcdcdc", "#0000ff"]);

        var columns = ['category', 'Does Not Meet', 'Partially Meets', 'Fully Meets', 'Exceed'];

        var keys = columns.slice(1);

        var color = d3.scaleOrdinal()
    .range(["#00008b", "#696969", "#dcdcdc", "#0000ff"]);


        x0.domain(data.map(function (d) { return d.category; }));
        x1.domain(keys).rangeRound([0, x0.bandwidth()]);
        y.domain([0, 100]).nice();

        g.append("g")
            .selectAll("g")
            .data(data)
            .enter().append("g")
            .attr("transform", function (d) { return "translate(" + x0(d.category) + ",0)"; })
            .selectAll("rect")
            .data(function (d) { return keys.map(function (key) { return { key: key, value: d[key] }; }); })
            .enter().append("rect")
            .attr("x", function (d) { return x1(d.key); })
            .attr("y", function (d) {
                return y(d.value);
            })
            .attr("width", x1.bandwidth() - 7)
            .attr("height", function (d) { return height - y(d.value); })
            .attr("fill", function (d) { return z(d.key); })

            .on("mousemove", function(d){
                tooltip
                  .style("left", d3.event.pageX - 50 + "px")
                  .style("top", d3.event.pageY - 70 + "px")
                  .style("display", "inline-block")
                  .html((d.key) + "<br>" + (d.value) + "%");
            });



         g.append("g")
        .selectAll("g")
        .data(data).enter()
        .append("g")
       .attr("transform", function (d) { return keys })
            .attr("class", "axis")
            .attr("transform", "translate(0," + height + ")")
            .attr("x", function (d) { return x0(d.category); })
            .call(d3.axisBottom(x1))

            .selectAll("text")
             .attr("y", 15)
             .attr("x", 0)
            .attr("dy", ".35em")
            .attr("transform", "rotate(50)")
            .style("text-anchor", "start");;
        g.append("g")
            .attr("class", "axis")
            .call(d3.axisLeft(y).ticks(null, "s"))
            .append("text")
            .attr("x", 2)
            .attr("y", y(y.ticks().pop()) - 5)
            .attr("dy", "0.32em")
            .attr("fill", "#000")
            .attr("font-weight", "bold")
            .attr("text-anchor", "start")
            .text("Employees (%)");


        //chart title
        g.append("text")
            .attr("x", (width / 2) + 30)
            .attr("y", 1 - (margin.top / 2) + 20)
            .attr("text-anchor", "middle")
            .style("font-size", "16px")
            .style("font-weight", "bold")
            .style("text-decoration", "underline")
            .attr("font-family", "sans-serif")
            .text("Performance Distribution");




};

var chart1=d3.选择（“svgarea2”），
边距={顶部：70，右侧：0，底部：30，左侧：40}，
宽度=+图表1.attr（“宽度”）-margin.left-margin.right，
高度=+图表1.attr（“高度”）-margin.top-margin.bottom，
g=chart1.append（“g”）.attr（“transform”、“translate”（“+margin.left+”，“+margin.top+”））；
//图表背景色
var bg=d3.选择（“g”）.追加（“svg”）
//.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“宽度”，510+“像素”）
//.attr（“高度”，高度+边距。顶部+边距。底部）；
.attr（“高度”，310+“像素”）；
bg.append（“rect”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）
.attr（“填充”，“#f8f8ff”）；
背景附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//比例图
var x0=d3.scaleBand（）
.rangeRound（[0，宽度]）
.填塞器（0.4）；
var x1=d3.scaleBand（）
.填充（0.05）；
变量y=d3.scaleLinear（）
.rangeRound（[高度，0]）；
var z=d3.scaleOrdinal（）//d3.schemeCategory 20
//.范围（[“#0000ff”、“#DCDC”、“#696969”、“#00008b”]）；
.范围（[“#00008b”、“#696969”、“#DCDC”、“#0000ff”）；
var columns=['category'、'Not-meeting'、'Partially-meeting'、'Fully-meeting'、'except']；
var keys=columns.slice（1）；
var color=d3.scaleOrdinal（）
.范围（[“#00008b”、“#696969”、“#DCDC”、“#0000ff”）；
域（data.map（函数（d）{returnd.category；}））；
x1.域（键）.rangeRound（[0，x0.bandwidth（）]）；
y、 域（[01100]）.nice（）；
g、 附加（“g”）
.全选（“g”）
.数据（数据）
.enter（）.append（“g”）
.attr（“transform”，函数（d）{return”translate（“+x0（d.category）+”，0）”；}）
.selectAll（“rect”）
.data（函数（d）{return key.map（函数（key）{return{key:key，value:d[key]}；}）；}）
.enter（）.append（“rect”）
.attr（“x”，函数（d）{返回x1（d.key）；}）
.attr（“y”，函数（d）{
返回y（d值）；
})
.attr（“宽度”，x1.bandwidth（）-7）
.attr（“高度”，函数（d）{返回高度-y（d.value）；}）
.attr（“fill”，函数（d）{返回z（d.key）；}）
.on（“mousemove”，函数（d）{
工具提示
.style（“左”，d3.event.pageX-50+“px”）
.样式（“顶部”，d3.event.pageY-70+“px”）
.style（“显示”、“内联块”）
.html（（d.key）+“
”+（d.value）+“%”）；
});
g、 附加（“g”）
.全选（“g”）
.data（data）.enter（）
.附加（“g”）
.attr（“转换”，函数（d）{返回键}）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.attr（“x”，函数（d）{return x0（d.category）；}）
.call（d3.axisBottom（x1））
.selectAll（“文本”）
.attr（“y”，15）
.attr（“x”，0）
.attr（“dy”，“.35em”）
.attr（“变换”、“旋转（50）”）
.style（“文本锚定”、“开始”）；；
g、 附加（“g”）
.attr（“类”、“轴”）
.call（d3.axisLeft（y）.ticks（null，“s”））
.append（“文本”）
.attr（“x”，2）
.attr（“y”，y（y.ticks（）.pop（））-5）
.attr（“dy”，“0.32em”）
.attr（“填充”、“千”）
.attr（“字体大小”、“粗体”）
.attr（“文本锚定”、“开始”）
.文本（“员工（%）”；
//图表标题
g、 附加（“文本”）
.attr（“x”，（宽度/2）+30）
.attr（“y”，1-（margin.top/2）+20）
.attr（“文本锚定”、“中间”）
.style（“字体大小”、“16px”）
.style（“字体大小”、“粗体”）
.style（“文本装饰”、“下划线”）
.attr（“字体系列”、“无衬线”）
.文本（“绩效分配”）；
};

---

感谢您的帮助

如果您为每个条形图创建一个g元素，然后将轴、条形图等添加到每个条形图中，则该功能将起作用。例如，请参见此处：

相关代码：

var chart = g.append("g")
            .selectAll("g")
            .data(data)
            .enter().append("g");

        chart.attr("transform", function (d) { return "translate(" + x0(d.category) + ",0)"; })
            .selectAll("rect")
            .data(function (d) { return keys.map(function (key) { return { key: key, value: d[key] }; }); })
            .enter().append("rect")
            .attr("x", function (d) { return x1(d.key); })
            .attr("y", function (d) {
                return y(d.value);
            })
            .attr("width", x1.bandwidth() - 7)
            .attr("height", function (d) { return height - y(d.value); })
            .attr("fill", function (d) { return z(d.key); })


         //APPEND AN AXIS TO THE CHART G'S
         chart.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + height + ")")
            .attr("x", function (d) { return x0(d.category); })
            .call(d3.axisBottom(x1))
            .selectAll("text")
             .attr("y", 15)
             .attr("x", 0)
            .attr("dy", ".35em")
            .attr("transform", "rotate(50)")
            .style("text-anchor", "start");

---

如果您为每个条形图创建一个g元素，然后将轴、条形图等添加到每个条形图中，它将起作用。例如，请参见此处：

相关代码：

var chart = g.append("g")
            .selectAll("g")
            .data(data)
            .enter().append("g");

        chart.attr("transform", function (d) { return "translate(" + x0(d.category) + ",0)"; })
            .selectAll("rect")
            .data(function (d) { return keys.map(function (key) { return { key: key, value: d[key] }; }); })
            .enter().append("rect")
            .attr("x", function (d) { return x1(d.key); })
            .attr("y", function (d) {
                return y(d.value);
            })
            .attr("width", x1.bandwidth() - 7)
            .attr("height", function (d) { return height - y(d.value); })
            .attr("fill", function (d) { return z(d.key); })


         //APPEND AN AXIS TO THE CHART G'S
         chart.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + height + ")")
            .attr("x", function (d) { return x0(d.category); })
            .call(d3.axisBottom(x1))
            .selectAll("text")
             .attr("y", 15)
             .attr("x", 0)
            .attr("dy", ".35em")
            .attr("transform", "rotate(50)")
            .style("text-anchor", "start");