D3 Appending Text to a SVG Rectangle

Question

I'm looking to append html onto a rectangle in D3 to give me a multiple line tooltip. The bottom part is how I'm adding a rectangle which may be part of the problem. The top is the code that should work in my world. ``` newRect.().html(" "); ``` Which does insert a text field into the SVG, it just doesn't display: HTML: ``` ``` I have a mouse over function which runs the following: ``` newRect = svg.append("rect") .attr("x", xCor) .attr("y", yCor) .attr("width", 130) .attr("height", 160) .attr("fill", "red") .attr("id", "rectLabel"); ``` I think I should be doing this but it doesn't work. It just removes the g.node that I'm trying to append to. ``` newRect = $(this).enter().append("rect") .attr("x", xCor) .attr("y", yCor) .attr…

Accepted Answer

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.

D3 Appending Text to a SVG Rectangle

Solution

Problem