标签在D3条形图中没有进入正确位置

Question

我的条形图有以下问题。如何在条形图标签中的适当位置设置小数标签值。标签不应该在最近的条形图中重叠。但在我的情况下它overlapping.please建议如何纠正它 下面是我的代码

var data = [ 
        { Request: 1, AvgRequest: 4123.18 }, 
        { Request: 2, AvgRequest: 5221.16 }, 
        { Request: 3, AvgRequest: 32.42 }, 
         { Request: 4, AvgRequest: 22.13 }, 
        { Request: 5, AvgRequest: 413.21 }, 
        { Request: 6, AvgRequest: 112.19 } 
       ]; 



      var margin = { top: 40, right: 40, bottom: 35, left: 85 }, 
    width = 450 - margin.left - margin.right, 
    height = 250 - margin.top - margin.bottom; 

      var formatPercent = d3.format(".0%"); 

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

      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("body").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.Request = d.Request; 
       d.AvgRequest = +d.AvgRequest; 

      }); 

      x.domain(data.map(function (d) { return d.Request; })); 
      y.domain([0, d3.max(data, function (d) { return d.AvgRequest; })]); 

      svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 


      // xAxis label 
      svg.append("text") 
    .attr("transform", "translate(" + (width/2) + " ," + (height + margin.bottom + 5) + ")") 
    .style("text-anchor", "middle") 
    .text("Numbers of request"); 

      //yAxis label 
      svg.append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 0 - margin.left) 
     .attr("x", 0 - (height/2)) 
     .attr("dy", "1em") 
     .style("text-anchor", "middle") 
     .text("avg request); 

      // Title 
      svg.append("text") 
     .attr("x", (width/2)) 
     .attr("y", 0 - (margin.top/2)) 
     .attr("text-anchor", "middle") 
     .style("font-size", "16px") 
     .style("text-decoration", "underline") 
     .text("Avg"); 

      svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 


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




      var text = svg.selectAll("text1") 
       .data(data) 
       .enter() 
       .append("text") 
       .attr("class", function (d) { return "label " + d.Request; }) 
       .attr("x", function (d, i) { 
        return x(i) + x.rangeBand()/5; 
       }) 
       .attr("y", function (d, i) { 
        return y(d.AvgRequest) + 25; 
       }) 

      .text(function (d) { return d.AvgRequest; }) 
       .attr("font-size", "15px") 
       .style("stroke", "black"); 

Answer 1

我添加了两个新的变量，以单独的完整图和绘图区的尺寸：

var margin = { top: 40, right: 40, bottom: 35, left: 85 }, 
    width = 450, 
    height = 250; 
    plotAreaWidth = width - margin.left - margin.right, 
    plotAreaHeight = height - margin.top - margin.bottom; 

，并相应地改变其他代码。

和变化的文本标签：

var text = svg.selectAll("text1") 
    .data(data) 
    .enter() 
    .append("text") 
    .attr("class", function (d) { return "label " + d.Request; }) 
    .attr("x", function (d, i) { 
     //return x(i) + x.rangeBand()/2; 
     return x(d.Request); 
    }) 
    .attr("y", function (d, i) { 
     //return y(d.AvgRequest) + 25; 
     return y(d.AvgRequest) - 5; 
    }) 
    .text(function (d) { return d.AvgRequest; }) 
     .attr("font-size", "15px") 
     .style("stroke", "black"); 

更改例如at jsbin。