Question

我正在试图找出正确的方法来显示位于条形图中每个条形顶部的标签。我也希望他们在数字后显示％。

这是我的Plunker：https://plnkr.co/edit/FbIquWxfLjcRTg7tiX4E?p=preview

我尝试使用以下链接中的问题代码。但是，我无法使其正常工作（意味着整个图表无法显示）

var yTextPadding = 20;
svg.selectAll(".bartext")
.data(data)
.enter()
.append("text")
.attr("class", "bartext")
.attr("text-anchor", "top")
.attr("fill", "white")
.attr("x", function(d,i) {
    return x(i)+x.rangeBand()/2;
})
.attr("y", function(d,i) {
    return height-y(d)+yTextPadding;
})
.text(function(d){
     return d;
});

Answer 1

根据现有代码，这是最直接的方式：

    // keep a reference to the g holding the rects
    var rectG = g.append("g")
        .selectAll("g")
        .data(data)
        .enter().append("g")
        .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; })
        .selectAll("rect")
        .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
        .enter();

    // append the rects the same way as before
    rectG.append("rect")
        .attr("x", function(d) { return x1(d.key); })
        .attr("y", function(d) { return y(d.value); })
        .attr("width", x1.bandwidth())
        .attr("height", function(d) { return height - y(d.value); })
        .attr("fill", function(d) { return z(d.key); });

    // now add the text to the g
    rectG.append("text")
      .text(function(d){
        return d.value + '%';
      })
      .attr("x", function(d) { return x1(d.key) + (x1.bandwidth()/2); })
        .attr("y", function(d) { return y(d.value); })
        .style("text-anchor", "middle");

更新了plunker。

在Barchart D3js上添加标签文本

1 个答案: