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

Question

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

http://bl.ocks.org/mbostock/4339083

Спасибо!

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

Answer 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; 
}