D3 Appending Text to a Svg Rectangle

D3 Appending Text to a SVG Rectangle

A rect can't contain a text element. Instead transform a g element with the location of text and rectangle, then append both the rectangle and the text to it:

var bar = chart.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 1);

bar.append("text")
    .attr("x", function(d) { return x(d) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d; });

http://bl.ocks.org/mbostock/7341714

Multi-line labels are also a little tricky, you might want to check out this wrap function.

Inserting a text on top of the rect component in a svg using d3

you pretty much do the same thing as you did to create the bars, but instead with the text

svg.append("g")
  .selectAll("label")
  .data(seriesRealModel)
   .join('text')
   .text( d => `${d.key}${formatValue(d.data[d.key])}`);
    // positioning the text in the middle of the bar
    .attr('x', d  => xRealModel(d.data.Week) + xRealModel.bandwidth() /2)
    // positioning on the top of the bar 
    .attr('y',d => yRealModel(d[1]) -5)
    .attr("fill", "black")

How do I draw text in a rectangle in D3?

As I said in my comments, you want to group your rect and text in a g element. Here's the simplest example:

<!DOCTYPE html><html>
  <head>    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>  </head>
  <body>    <script>    var data = [{      x: 20,      y: 30,      text: "Hi"    }, {      x: 100,      y: 200,      text: "bye"    }];
    var svg = d3.select("body")      .append("svg")      .attr("width", 500)      .attr("height", 500);
    var g = svg.selectAll('.someClass')      .data(data)      .enter()      .append("g")      .attr("class","someClass")      .attr("transform", function(d) {          return "translate(" + d.x + "," + d.y + ")";      });
    g.append("rect")      .attr("width", 40)      .attr("height", 40)      .style("fill", "red");
    g.append("text")      .style("fill", "black")      .text(function(d) {        return d.text;      })  </script>  </body>
</html>

How to append text to SVG

You are calling call(xAxis) and call(yAxis) which will create <text> elements so when you say d3.selectAll("text") it selects those elements created by call(xAxis) and call(yAxis).

so suppose your data count is 5 then it has already 5 <text> elements and it won't append a new one.

Update your code to

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate("+margin.left+","+height+")") 
            .call(xAxis);

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate("+margin.left+",0)")
            .call(yAxis);

after below code

svg.selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .text(function(d){return d.doc_count;})

How do I append text to my rect in d3?

Couple of Problems with your code:

The <text> cannot go inside a <rectangle> in svg.
The top level group being filled with a color, hides everything inside it.

A solution to the first point is to group the <rectangle> & <text> into sub groups of <g>

Update Code: (Demo)

var data = [0, 1, 2];
var width = 100;
var height = 100;

var canvas = d3.select("body")
               .append("svg")
               .attr("height", 500)
               .attr("width", 500)
               //.attr("fill", "red")
               .append("g");

var someData = canvas.selectAll("rect")
                    .data(data)
                    .enter()
                     .append("g")
                      .append("rect")
                      .attr("height", height)
                      .attr("width", width)
                      .attr("fill", "red")
                      .attr("transform", 
                       function(d){ return "translate(" + height * d + ",0)";});

canvas.selectAll("g")
        .append("text")
        .attr("transform", 
              function(d){ return "translate(" + height * d + ",30)";})
        .attr("font-size", "2em")
        .attr("color", "black")
        .text(function(d){ return d;});

Adding text to rect not working

A rect can't contain a text element. Instead transform a g element with the location of text and rectangle, then append both the rectangle and the text to it:

D3 Appending Text to a SVG Rectangle

svgContainer.append("text")
    .attr("id", "rectangleText")
    .attr("class", "visible")
    .attr("x", 10)
    .attr("y", 50)
    .attr("dy", ".35em")
.text("You're Welcome :)");

Instead of appending it to the rectangle append it to the object the rectangle is appended to :)

Fiddle : http://jsfiddle.net/nhe613kt/71/

Also, your dragging of the rectangle is a bit static, doesnt move correctly. You need to split your zoom function and create a drag function separately. Then append the dragged to the rectangle, and the zoomed to the SVG :)

Hope that helps

Append text to SVG `rect` rotated around origin in D3js

Something like this?

var text = svg.selectAll('text')
  .data(data)
  .enter()
  .append("text")
  .text(function(d){
    return d;
  })
  .attr('fill', 'black')
  .attr('transform', function(d, i) {
    var a = (340 + (i*30)) * Math.PI/180;
    var x = 210 * Math.cos(a) + originX;
    var y = 210 * Math.sin(a) + originY;
    return 'translate('+x+','+y+')'; 
  });

Example here.

D3 Appending Text to a Svg Rectangle