Question

I have a stacked group bar chart. Every bar in group is having stacked columns . So I need to print labels(text) on every bar in the chart. But I am able to print one label per group. My code looks like this,

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

var project_stackedbar = svg.selectAll(".project_stackedbar")
    .data(data)
  .enter().append("g")
    .attr("class", "g")
    .attr("transform", function (d) { return "translate(" + x0(d.Month) + ",0)"; });

project_stackedbar.selectAll("rect")
    .data(function (d) { return d.columnDetails; })
    .enter()
    .append("rect")
    .attr("width", x1.rangeBand())
    .attr("x", function (d) {
        return x1(d.column);
    })
    .attr("y", function (d) {
        return y(d.yEnd);
    })
    .attr("height", function (d) {
        return y(d.yBegin) - y(d.yEnd);
    })
    .style("fill", function (d) { return color(d.name); });

project_stackedbar.append("text")
.attr("x", function (d) { return x1(d.column) })
.attr("y", function (d) {
   return y(d.yEnd) - 6;})
.text(function (d) { return (y(d.yEnd)); } );

Thanks in advance.

Answer 1

您必须通过执行以下操作来指定要以文本标签形式打印的数据：

project_stackedbar.selectAll("text")
.data(function (d) { return d.columnDetails; })
.enter()
.append("text")
.attr("x", function (d) { return x1(d.column) })
.attr("y", function (d) {
    return y(d.yEnd) - 6;})
.text(function (d) { return (y(d.yEnd)); } );

可能需要调整x和y位置。

希望这有帮助。

Creating labels on STACKED GROUP bar chart in d3.js

1 个答案: