设置d3.js可折叠树的背景

Question

我创建了一个可堆叠的树，如本例所示（http://bl.ocks.org/mbostock/4339083）。我试图改变SVG的背景颜色。因此，在插入“g”元素之前，我使用“rect”元素：

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 + ")");

使用此方法隐藏图表。是否有任何解决方案将“rect”元素设置为背景并使图形可见？

谢谢

Answer 1

SVG元素按照添加顺序绘制。因此，如果您希望rect位于后台，请在创建SVG后将其添加为第一个元素。

要获得纯色背景，您可以使用viewport-fill attribute，但所有浏览器都不支持。