Добавление d3 Этикетки не работает

Question

Я пытался добавить метки к моей гистограмме, как описано в этом вопросе:

Adding label on a D3 bar chart

Однако, я могу получить ярлыки для отображения, но не по соответствующей строке (все они выровнены над/на первом баре). Любая помощь будет принята с благодарностью. Вот мой код:

var cdata = { title: "Sample Chart", Pod: 10, WOSNF : 201.57, SNFW: 8.89, YTDTarget: 15.14, AnnualTarget: 22.10, Max: 250 } 
var margin = {top: 20, right: 20, bottom: 70, left: 40}, 
width = 500 - margin.left - margin.right, 
height = 500 - margin.top - margin.bottom; 

// Parse the categories 

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

var y = d3.scale.linear().range([height, 30]); 
y.domain([0, 30]); 
var xAxis = d3.svg.axis() 
.scale(x) 
.orient("bottom") 

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

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 + ")"); 



d3.csv("data2.csv", function(error, data) { 

data.forEach(function(d) { 
    d.value = +d.value; 
    console.log(d.value); 

}); 

x.domain(data.map(function(d) { return d.Category; })); 


svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
.append("text") 
    .style("text-anchor", "end") 
    .attr("x", width/2) 
    .attr("y", 30) 
    .attr("dx", ".71em") 
    .attr("transform", "translate(40,20)") 
    ; 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
.append("text") 
    .attr("transform", "translate(" + (width/2) + ",-25)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "middle") 
    .style("font-size", "14pt") 
    .text("Sample Chart"); 


svg.selectAll("bar") 
    .data(data) 
.enter().append("rect") 
    .style("fill", "steelblue") 
    .style("fill-opacity", "0.5") 
    .attr("x", function(d) { return x(d.Category); }) 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { return y(d.value) - 1;}) 
    .attr("height", function(d) { return height - y(d.value);}) 

var yTextPadding = 20; 
svg.selectAll("bartext") 
    .data(data) 
.enter().append("text") 
    .attr("class", "bartext") 
    .attr("text-anchor", "middle") 
    .attr("fill", "black") 
    .attr("x", function(d, i) { 
     return x.rangeBand()/2; 
    }) 
    .attr("y", function(d) { 
     return y(d.value); 
    }) 
    .text(function(d){ 
     return d.value; 
    }); 

}); 

var G3 = svg.append("g") 
G3.append("line") 
.attr("y1", y(cdata["YTDTarget"])-1) 
.attr("y2", y(cdata["YTDTarget"])-1) 
.attr("x1", 0) 
.attr("x2", 500) 
.attr("stroke-width", 2) 
.attr("stroke", "black"); 



G3.append("text") 
.attr("x",10) 
.attr("y", y(cdata["YTDTarget"])+10) 
.style("fill", "black") 
.style("text-anchor", "start") 
.text("RU YTD Target - " + cdata["YTDTarget"]); 

var G4 = svg.append("g") 
G4.append("line") 
.attr("y1", y(cdata["AnnualTarget"])-1) 
.attr("y2", y(cdata["AnnualTarget"])-1) 
.attr("x1", 0) 
.attr("x2", 500) 
.attr("stroke-width", 2) 
.attr("stroke", "black"); 




G4.append("text") 
.attr("x", 10) 
.attr("y", y(cdata["AnnualTarget"])+10) 
.style("fill", "black") 
.style("text-anchor", "start") 
.text("RU Annual Target - " + cdata["AnnualTarget"]); 

А вот данные:

Category,value 
"Group1",27.2 
"Group2",24.6 
"Group3",27.1 

Элементов следующего разбора данных должны рисовать линии на графику для справки.

Спасибо!

Answer 1

Вы в настоящее время установки x положение меток на половину ширины первого бара (так что все они в конечном итоге на левой стороне.

Вы хотите x положение bartext, чтобы начать в то же в качестве токового стержня и добавьте половину ширины штанги: