Próbuję dodać etykiety danych do skumulowanego wykresu słupkowego w d3.

Chciałem, aby etykiety danych znajdowały się na środku paska. Do tej pory po prostu zorientowałem się, jak dodawać etykiety danych na górze każdego paska. Ale tak naprawdę chciałem, żeby te etykiety były w środku każdego paska.

Oto mój kod :

var width = 750,
height = 500;

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

var y = d3.scale.linear()
        .rangeRound([height, 0]);

var color = d3.scale.ordinal()
            .range(["#D70B16", "#154CEF", "#1A8A55"]);

var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

var yAxis = d3.svg.axis()
            .scale(y)
            .orienta("left")
            .tickFormat(d3.format(".2s"));

var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d) {
        return "Value: " + (d.y1 - d.y0) + "";
        })

var svgContainer = d3.select("body")
                    .append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .append("g")
                    .attr("transform", "translate(" + 30 + "," + 30 + ")");


d3.csv("data.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { 
    return key !== "circle"; 
    }));

  data.forEach(function(d) {
    var y0 = 0;
    d.hours = color.domain().map(function(name) { 
      return {name: name, y0: y0, y1: y0 += +d[name]}; 
      });

    d3.select('body').append('pre')
            .text(JSON.stringify(d.hours, null, '  '));

    d.total = d.hours[d.hours.length - 1].y1;
  });

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

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

  svgContainer.append("g")
              .attr("class", "y axis")
              .call(yAxis)
              .append("text")
              .attr("transform", "rotate(-90)")
              .attr("y", 6)
              .attr("dy", ".71em")
              .style("text-anchor", "end")
              .text("Login Hours");

  var circle = svgContainer.selectAll(".circle")
              .data(data)
              .enter().append("g")
              .attr("class", "g")
              .attr("transform", function(d) { 
                return "translate(" + x(d.circle) + ",0)"; 
              });

  circle.selectAll("rect")
        .data(function(d) { return d.hours; })
        .enter()
        .append("rect")
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.y1); })
        .attr("height", function(d) { return y(d.y0) - y(d.y1); })
        .on("mouseover", tip.show)
        .on("mouseout", tip.hide)
        .style("fill", function(d) { return color(d.name); });


  circle.selectAll("text")
        .data(function(d) { return d.hours; })
        .enter()
        .append("text")
        .attr("x", 75)
        .attr("y", function(d, i) { return y(d.y1) ; })
        .style("text-anchor", "middle")
        .text("test")

})

Dane :

state,value1, value2, value3
state1, 80, 10, 20
state2, 90, 5, 10
state3, 70, 15, 35
state4, 90, 3, 27
state5, 50, 25, 55
state6, 85, 8, 27

Właściwie nie mogłem dowiedzieć się, jak uzyskać punkt środkowy współrzędnych X i Y każdego taktu.

Pomóż mi w rozmieszczeniu etykiet na środku każdego paska.