Установите фон для d3.js collabsible tree

Question

Я создаю сложенное дерево, как в этом примере (http://bl.ocks.org/mbostock/4339083). Я попытался изменить цвет фона SVG. Therefor Я использую элемент «прямоугольник», прежде чем вставить элемент «G»:

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, который не поддерживается всеми браузерами.