为 d3.js 可折叠树设置背景答案

【问题标题】：Set background for d3.js collabsible tree为 d3.js 可折叠树设置背景
【发布时间】：2013-12-06 21:59:38
【问题描述】：

我在这个例子中创建了一个可协作的树 (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”元素设置为背景并使图形可见？

谢谢

【问题讨论】：

标签： javascript css svg d3.js

【解决方案1】：

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

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

【讨论】：