Set background for d3.js collabsible tree

Question

I create a collabsible tree like in this example ( http://bl.ocks.org/mbostock/4339083 ). I tried to change the background color of the SVG. Therefor I use a "rect" element before inserting the "g" element:

svg = d3.select("#"+targetDIVName).append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.attr("id", "svg_graph")
.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "green") //for example
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

With this method the graph is hidden. Is there any solution to set the "rect" element as background and get the graph visible?

Thank You

Answer 1

SVG elements are drawn in the order in which they are added. So if you want the rect to be in the background, add it as the first element after creating the SVG.

To get a solid background colour, you could alternatively use the viewport-fill attribute , which is not supported by all browsers though.