Как установить фоновый цвет D3.js svg?

Я не очень хорошо разбираюсь в моделировании D3.js SVG. Я создаю сворачиваемое дерево и предоставит возможность загрузить это дерево как SVG/PDF/PNG. Это отлично работает, но фоновый цвет результирующих файлов всегда прозрачен. Есть ли возможность создать D3 SVG с определенным фоном? Я использовал этот пример для своей работы:

Ответы

Ответ 1

Просто добавьте <rect> в качестве первого элемента порядка рисования, который отображает желаемый цвет.

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom);

svg.append("rect")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", "pink");

svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Ответ 2

Вы можете использовать SVG в качестве другого компонента HTML, вы можете установить его свойства CSS:

Например, при создании svg вы устанавливаете класс:

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .attr("class", "graph-svg-component");

В вашем CSS вы можете определить свойство:

.graph-svg-component {
    background-color: AliceBlue;
}