在d3图表中向条形添加标签

Question

我很想在我的图表中添加条形标签。我希望我的阵列中的票数悬停在每个栏上。这是我的图表现在的样子。

这是我的代码：

var data = [
        {"year":2013,"tickets": 500},
        {"year":2014,"tickets": 1500}];

    //creates svg
   var chart = d3.select('#chart').append('svg')
        .style('background', '#E7E0CB')
        .attr('width', width + margin.left + margin.right)
        .attr('height',height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', 'translate('+ margin.left +','+ margin.right +')')
        .style('background','#eee')

chart.selectAll('rect')
            .data(data)//read bar data
            .enter()
            .append('rect')//data makes a rectangle
                    .style('fill','steelblue')
                    .attr('width', xScale.rangeBand())
                    .attr('height', function(d){return yScale(d.tickets);})
                    .attr('x', function(d, i) {return xScale(d.year);})       
                    .attr('y', function (d) {return height - yScale(d.tickets);}) //sets bars at the bottom

    chart.selectAll("rect")
            .data(data).enter()
            .append("text")                 
                .attr("x", function(d) { return xScale(d.tickets); })
                .attr("y", function(d) { return yScale(d.tickets); })
                .text(function(d) { return (d.tickets); });

Answer 1

这应该适合你：

var text = chart.selectAll(".text")
    .data(data)
  .enter()
  .append("text")
    .attr("class","text");

var labels = text.attr("x", function (d) {
        return xScale(d.year) + xScale.rangeBand()/2;
    })
    .attr("y", function (d) {return yScale(d.tickets);})
    .text(function (d) { return d.tickets;});

以下是包含上述代码段的最小FIDDLE以及对您发布的代码的一些小修正。