Question

我一直试图在条形图中添加标签，如本问题所述：

但是，我可以显示标签，但不能在相应的栏上显示（它们都排列在第一个栏上/上）。任何帮助将不胜感激。这是我的代码：

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的{{1}}位置从与当前小节相同的位置开始，并添加条形宽度的一半：

bartext

添加d3标签不起作用

1 个答案: