javascript - placing a rectangle under another element

Question

I have text, and I used a bbox to be able to add a rectangle to match the size of the text.

When I draw the rectangle it is the correct size, but the rectangle is on top of my text.

Is there a way to put the rectangle under the text?

Answer 1

You can use D3's insert to place the <rect> before the <text> in the SVG structure. For example:

svg.insert("rect", "text")
  .attr("x", bbox.x)
  .attr("y", bbox.y)
  .attr("width", bbox.width)
  .attr("height", bbox.height)
  .attr('class',"rectFillBox")
  .attr('fill','white')
  .attr("fill-opacity", 0.5);