如何在条形图上追加文字？

如何解决如何在条形图上追加文字？

我正在创建rect组件'eachBar'的类，尝试使用以下代码附加每个bar的值

    var text = g.selectAll(".eachBar").select(null)
        .append('g').data(data)
                .data(function (d) {
                return keys.map(function (key) { 
                    return { key: key,value: d[key] }; 
            }); 
         })
                .enter()
        .append('text')
        .text(function (d)
        {
          return d.value;
         })
        .attr("x",function(d,i){ return x(d.key) + margin.left})
        .attr("y",function(d) { return y(d.value);})
        .attr("fill","black");

但是我遇到一个错误：

GroupedBargraph.htm：96未捕获的TypeError：无法读取未定义的属性“ Apple”

如何在图形的每个条形上显示值，有人可以帮助我吗？我使用的代码如下：

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

    var x0 = d3.scaleBand()
        .rangeRound([0,width])
        .paddingInner(0.1);

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

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

    var z = d3.scaleOrdinal()
        .range(["Red","Yellow"]);

    var vals = '[{"Year":"Year 2016","Apple":870,"Mango":449},{"Year":"Year 2017","Apple":202,"Mango":327},{"Year":"Year 2018","Apple":170,"Mango":214},{"Year":"Year 2019","Apple":114,"Mango":193},{"Year":"Year 2020","Apple":894,"Mango":155}]';
    data = JSON.parse(vals);
    var keys = Object.keys(data[0]).slice(1);

    x0.domain(data.map(function (d) { return d.Year; }));
    x1.domain(keys).rangeRound([0,x0.bandwidth()]);
    y.domain([0,d3.max(data,function (d) { return d3.max(keys,function (key) { return d[key]; }); })]).nice();

    g.append("g")
        .selectAll("g")
        .data(data)
        .enter().append("g").attr("class","eachBar")
        .attr("transform",function (d) { return "translate(" + x0(d.Year) + ",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())
        .attr("height",function (d) { return height - y(d.value); })
        .attr("fill",function (d) { return z(d.key); });

    g.append("g")
        .attr("class","axis")
        .attr("transform","translate(0," + height + ")")
        .call(d3.axisBottom(x0));

    g.append("g")
        .attr("class","axis")
        .call(d3.axisLeft(y).ticks(null,"s"))
        .append("text")
        .attr("x",2)
        .attr("y",y(y.ticks().pop()) + 0.5)
        .attr("dy","0.32em")
        .attr("fill","#000")
        .attr("font-weight","bold")
        .attr("text-anchor","start")
        .text("Quantity in tons");

    var legend = g.append("g")
        .attr("font-family","sans-serif")
        .attr("font-size",10)
        .attr("text-anchor","end")
        .selectAll("g")
        .data(keys.slice())
        .enter().append("g")
        .attr("transform",function (d,i) { return "translate(0," + i * 20 + ")"; });

    legend.append("rect")
        .attr("x",width - 19)
        .attr("width",19)
        .attr("height",19)
        .attr("fill",z);

    legend.append("text")
        .attr("x",width - 24)
        .attr("y",9.5)
        .attr("dy","0.32em")
        .text(function (d) { return d; });

    var text = g.selectAll(".eachBar").select(null)
        .append('g').data(data)
                .data(function (d) {
                return keys.map(function (key) { 
                    return { key: key,value: d[key] }; 
            }); 
         })
        .enter()
        .append('text')
        .text(function (d)
        {
          return d.value;
         })
        .attr("x","black");

<html>
<head></head>
<body>
   <script src="https://d3js.org/d3.v5.min.js"></script>
    <svg width="960" height="500"></svg>
</body>
</html>

如何在条形图上追加文字？

如何解决如何在条形图上追加文字？

相关推荐