将标签添加到d3图表中的条形图 [英] Add labels to bar in d3 chart

问题描述

我很想在我的图表中添加条形标签.我希望将阵列中的票证数量悬停在每个酒吧上.这是我的图表现在的样子.

这是我的代码:

  var数据= [{年":2013，门票":500}，{年":2014，门票":1500}]；//创建svgvar 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(数据)//读取条形数据.进入().append('rect')//data创建一个矩形.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);})//在底部设置条形chart.selectAll("rect").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);}); 

解决方案

这应该为您解决问题:

  var text = chart.selectAll(.text").data(数据).进入().append("text").attr("class"，"text");var标签= text.attr("x"，函数(d){返回xScale(d.year)+ xScale.rangeBand()/2;}).attr("y"，函数(d){返回yScale(d.tickets);}).text(function(d){return d.tickets;}); 

这是最小的 FIDDLE ，上面有摘录，并对您发布的代码进行了一些小的更正.

I'm struck trying to add bar labels into my chart. I want the number of tickets from my array to hover over each bar. Here's what my chart looks like now.

Here's my code:

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

解决方案

This should do the trick for you:

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

Here is a minimal FIDDLE with the snippet above and some minor corrections to the code you posted.

这篇关于将标签添加到d3图表中的条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！