How do I draw text in a rectangle in D3?

Question

I am using this calendar example: http://bl.ocks.org/KathyZ/c2d4694c953419e0509b and I want to put the value that appears in the mouseover inside each cell so it's always visible. I've tried adding this, which I thought would print '!!!' in each cell but it doesn't:

rect.append("text")
attr("dx", "+.65em")
.attr("dy", "+.65em")
.attr("opacity", "1")
.text(function(d) { return '!!!'; });

but it doesn't do anything

http://stackoverflow.com/questions/20644415/d3-appending-text-to-a-svg-rectangle — Marc, Jan 13 '16 at 20:48
Can't append a `text` element to a `rect`. Create a `g` and append the both the `rect` and `text` to it. — Mark, Jan 13 '16 at 20:51

score 3 · Accepted Answer · answered Jan 13 '16 at 21:19

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>

For the specific code you are looking at .day becomes a g:

var g = svg.selectAll(".day")
    .data(function(d) { 
      return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1));
    })
    .enter().append("g")
    .attr("class", "day")
    .attr("transform", function(d){
       var month_padding = 1.2 * cellSize*7 * ((month(d)-1) % (no_months_in_a_row));
       var x = day(d) * cellSize + month_padding; 
       var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
       var row_level = Math.ceil(month(d) / (no_months_in_a_row));
       var y = (week_diff*cellSize) + row_level*cellSize*8 - cellSize/2 - shift_up;
       return "translate(" + x + "," + y + ")";
    });

var rect = g.append("rect"))
    .attr("width", cellSize)
    .attr("height", cellSize)
    .datum(format);

 g.append("text") 
   .text("!!!")
   .style("fill", "black"); 
   // etc, etc, etc....

score 1 · Answer 2 · answered Jan 13 '16 at 20:48

1

the text attribute doesn't mean anything for a rect object. you want to add a separate text element: .enter().append("svg:text") and then .text(function(d) { return '!!!' }); and you can style the text element accordingly.

answered Jan 13 '16 at 20:48

bryce

3,022
1
15
19

I'm not sure if this will work, because I don't have access to where the rectangle is so can position the text inside it – nickponline Jan 13 '16 at 21:01
@nickponline, you put the rect and text in a g, you then position the g. – Mark Jan 13 '16 at 21:06
Could you help me out with a snippet @Mark, struggling to wrap my head around where the actual data is with D3 :/ – nickponline Jan 13 '16 at 21:07

How do I draw text in a rectangle in D3?

2 Answers2