Question

我对D3比较新，并尝试在分组条形图中添加标签。通过以下实现，我只能在一组而不是两组中看到它们。

以下是数据在db中的显示方式：

类别，超越，完全满足，部分会见，不符合业务，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");




};

感谢任何帮助！

Answer 1

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

http://blockbuilder.org/tomshanley/aa5471a3ecaf9e41283d68188aecf042

相关代码：

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");

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

1 个答案: