Unable to get x,y position in d3

Question

I am trying to add some text inside rectangles in d3.

var state = svg.selectAll(".state")
            .data(data)
            .enter().append("g")
            .attr("class", "g")
            .attr("transform", function(d) {
                return "translate(" + x(d[columns[0]]) + ",0)";
            });
var count = 0;
    state.selectAll("rect")
            .data(function(d) {
                return d.val;
            })
            .enter().append("rect")
            .attr("width", x.rangeBand())
            .attr("y", function(d) {
                return y(d.y1);               <<<===== Line 1
            })
            .attr("height", function(d) {

                return y(d.y0) - y(d.y1);
            })
            .attr("x", function(d) {
                return x(d.x);                   <<<===== Line 2
            })
            .style("fill", function(d,i) {
            return colorSet(i);
            })
            .attr("id", function(d, i) {
                return col[i];
            })
            .attr("onclick", fun)
            .append("text")
            .attr("transform",function(d) {
                   var xvalue =x(d.x);         <<<===== Line 3
                    var yValue = y(d.y1);      <<<===== Line 4
                    return "translate(" + xvalue + ", " + yValue + ")";
                })
            .text("AAA");

First when i am adding the rectangles I am able to get x and y positons x(dx) and y(d.y1) as mentioned by 'line 1' and 'line 2' but when I am again trying to get x and y value in 'line 3' and 'line 4' I am getting wrong values. Can anyone point out what is wrong with this code??? Thanks in advance.

Answer 1

As @Cool Blue mentioned you cannot append text element inside a rect element so try this code:

var state = svg.selectAll(".state")
        .data(data)
        .enter().append("g")
        .attr("class", "g")
        .attr("transform", function(d) {
            return "translate(" + x(d[columns[0]]) + ",0)";
        });
     var count = 0;
     state.selectAll("rect")
        .data(function(d) {
            return d.val;
        })
        .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);
        })
        .attr("x", function(d) {
            return x(d.x);                   
        })
        .style("fill", function(d,i) {
        return colorSet(i);
        })
        .attr("id", function(d, i) {
            return col[i];
        })
        .attr("onclick", fun);

 state.selectAll("text")
        .data(function(d) {
            return d.val;
        })
        .enter().append("text")
        .attr("transform",function(d) {
               var xvalue =x(d.x);         
                var yValue = y(d.y1);      
                return "translate(" + xvalue + ", " + yValue + ")";
            })
        .text("AAA");