javascript - D3 - 将数据标签添加到简单的条形图中

Question

我知道这很容易，我也在这个论坛以及其他网站上看到了一些示例，但我只是无法弄清楚。

我是使用 D3 库生成图表的新手。我正在尝试通过创建条形图来学习。

我的问题是如何将数据标签添加到图表中？

下面是我的代码。

然后我就有了我的 JS:

    var chartwidth = 800;
    var chartheight = 600;

    var data =  [
      {"Start_Dt":"Jan 15","UnitName":"Unit 1","ProgramName":"ProgramName 1","AttendCnt":159,"NewcomerCnt":10}
      , {"Start_Dt":"Jan 22","UnitName":"Unit 2","ProgramName":"ProgramName 2","AttendCnt":178,"NewcomerCnt":5}
      , {"Start_Dt":"Feb 14","UnitName":"Unit 2","ProgramName":"ProgramName 3","AttendCnt":240,"NewcomerCnt":46}
      , {"Start_Dt":"Feb 19","UnitName":"Unit 1","ProgramName":"ProgramName 4","AttendCnt":201,"NewcomerCnt":10}
      , {"Start_Dt":"Feb 26","UnitName":"Unit 2","ProgramName":"ProgramName 5","AttendCnt":177,"NewcomerCnt":7}
      , {"Start_Dt":"Mar 12","UnitName":"Unit N","ProgramName":"ProgramName N","AttendCnt":184,"NewcomerCnt":3}
    ];                          

    var margin = {top: 20, right: 20, bottom: 300, left: 40},
        width = chartwidth - margin.left - margin.right,
        height = chartheight - margin.top - margin.bottom;

    var formatPercent = d3.format(".0%");
    var formatTime = d3.time.format("%e %B");

    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

    var x2 = d3.scale.ordinal()
    .rangeBands([0, width], 0);

    var y = d3.scale.linear()
    .range([height, 0]);

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom"); 

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

    var svg = d3.select(".chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    data.forEach(function(d) {
      d.AttendCnt = +d.AttendCnt;
    });

    x.domain(data.map(function(d) { return d.Start_Dt + " " + d.ProgramName; }));
    y.domain([0, d3.max(data, function(d) { return d.AttendCnt; })]);

    //Create X Axis
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)                        
      .selectAll("text")  
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", ".15em")
      .attr("transform", "rotate(-65)" )
      .append("text")
      .attr("y", 25)
      .attr("x",x.rangeBand()/2 )
      .style("text-anchor", "middle")
      .style("font-size", "20px")
      .style("color", "black")
      .text(function(d,i) { return "xxx"; }); 

    //Create Y Axis
    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Attendance");

    svg.selectAll(".bar")
      .data(data)                                 
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.Start_Dt + " " + d.ProgramName); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.AttendCnt); })
      .attr("height", function(d) { return height - y(d.AttendCnt); });

Before

After

如何修改代码才能得到我想要的结果？谢谢

Answer 1

我还没有测试过代码，但它可能是这样的:

svg.selectAll(".barText")
      .data(data)                                 
      .enter().append("text")
      .attr("class", "barText")
      .attr("x", function(d) { return x(d.Start_Dt + " " + d.ProgramName); })
      .attr("y", function(d) { return height - y(d.AttendCnt); })
      .text(function(d) { return d.AttendCnt; })
      ;

希望对你有帮助