在Barchart D3js上添加标签文本

时间:2017-03-11 15:18:55

标签: javascript d3.js

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

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

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

Adding label on a D3 bar chart

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

1 个答案:

答案 0 :(得分:5)

根据现有代码,这是最直接的方式:

    // 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