How to set the background-color of a D3.js svg?

Question

I\'m not very familiar in styling D3.js SVG\'s. I create a collapsible tree and will provide an option to download this tree as SVG/PDF/PNG. This works great but the backgro

Answer 1

You can use the SVG as another HTML component, you can set its CSS properties:

For instance, on creating the svg, you set a class:

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

In your CSS you can define the property:

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