添加D3標籤不工作

我一直在努力標籤添加到我的條形圖在這個問題描述：添加D3標籤不工作

不過，我可以得到的標籤顯示，但不超過相應的條（他們都排在第一欄上/上）。任何幫助將不勝感激。這裏是我的代碼：

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

數據的解析以下的元素是繪製整個圖線以供參考。

謝謝！

來源

2015-08-31 joshv2

你標籤的x位置目前設定爲第一條的寬度的一半（所以他們都最終在左邊。

您希望bartext的x位置在同一啓動作爲當前條的點並添加條的一半寬度：

.attr("x", function(d, i) { 
    return x(d.Category) + (x.rangeBand()/2); 
})

來源

2015-08-31 14:27:39 grammar31

添加D3標籤不工作

回答

相關問題