assign text to rectangles not working

Question

I am dynamically creating rectangles and i am assigning one of the data values as text to the rectangle. In developer tools i can see the value but not on rectangles.

Code:

var x = d3.scale.linear().domain([0, data.length]).range([0, 1200]);

                       console.log(filtereddata);

                       rectangle= svg.selectAll("rect").data(filtereddata).enter().append("g").append("rect");



                       RectangleAttrb = rectangle
                        .attr("id", function (d,i) { return "rectid" + i ; })
                        .attr("x", function (d,i) {
                                                    return x(i);
                                                   })
                        .attr("y", function (d,i) { return 40; })
                        .attr("width",function(d,i) { 
                                                        if(d.value <100) 
                                                        {
                                                            return 50; 
                                                        }
                                                        else 
                                                        {
                                                            return d.value/2 ; 
                                                        }
                                                    } )
                        .attr("height",function(d) { return 40; })
                        .style("stroke", function (d) { return "white";})
                        .style("fill", function(d) { return "#01DF01"; })
                        .on("click",function(d,i) { console.log(d);});

                       console.log(RectangleAttrb);

                       rectangle.append("text")
                      .attr("x", function(d,i) { return x(i) + 5; })
                      .attr("y", 35)
                      .attr("dy", ".35em")
                      .attr("text-anchor", "middle")
                       .attr("fill", "black")
                      .text(function(d) { return d.value; });

My data is :

[{status:1;value:300},
{status:2;value:200},
{status:3;value:50}]

Yes, SVG does not support text attributes on [rect] and you can't have child elements inside the rect (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect), you need to create a g to contain both the rect and an svg:text element. — Cool Blue, May 29 '15 at 09:43
i did add a and replaced the code rectangle.append("g").append("svg:text") instead of rectangle.append("text") but still not working. — krishna_v, May 29 '15 at 09:48
No, you need to append g elements to svg and then append rect and text to the g separately. as I said, the g must contain them both. There are plenty of examples of this if you google... — Cool Blue, May 29 '15 at 10:02
Even here on SO there are good examples: http://stackoverflow.com/q/6725288/4235784 — altocumulus, May 29 '15 at 10:30

score 1 · Accepted Answer · edited May 23 '17 at 12:21

1

you need to append the rectangle to a tag and then append the text to that same . So basically the 'g' tag will be the parent of both the rect and the text :))

As mentioned in the comments here is a good question to refer to :

SVG: text inside rect

edited May 23 '17 at 12:21

Community

1
1

answered May 29 '15 at 10:47

thatOneGuy

9,977
7
48
90

assign text to rectangles not working

1 Answers1