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 background-color of the resulting files is always transparent. Is there a possibility to create the D3 SVG with a specific background-color? I used this example for my work:

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

Thank you!

Simply svg {background-color:red;} seems to be working for me. — tewathia, Nov 22 '13 at 10:55
Will that be included once you export the drawing to PDF/PNG though? — Robert Longson, Nov 22 '13 at 11:00
@tewathia - even though your solutions work, they are not a w3C standard (read more https://stackoverflow.com/questions/11293026/default-background-color-of-svg-root-element and https://www.w3.org/TR/SVG/styling.html) — Greeso, Sep 18 '17 at 03:20

score 71 · Accepted Answer · answered Nov 22 '13 at 10:56

71

Just add a <rect> as the first painting order item that displays the colour you want.

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

answered Nov 22 '13 at 10:56

Robert Longson

118,664
26
252
242

1

Not sure this works if you need to svg.selectAll("rect") for a bar chart? – Mark Seagoe Jan 29 '19 at 23:59
2

Well don't do that, select something more specific instead. – Robert Longson Jan 30 '19 at 00:00
I don't see anything i add after appending the rect. Its in the DOM but just gone. Did exactly what u said. Worrks without the rect. Any Idea? – efkah Apr 05 '23 at 15:25

score 28 · Answer 2 · answered Feb 21 '14 at 17:13

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

score 1 · Answer 3 · answered Nov 12 '21 at 07:48

Use .style() to control the CSS properties:

const svg = d3.create("svg")
              .attr("viewBox", [-width/2, -15, width/1.3, height])
              .attr("width", width)
              .attr("height", height)
              .attr("style", "max-width: 100%; height: auto; height: intrinsic;")
              .attr("font-family", "sans-serif")
              .attr("font-size", 15)
              .style("background", "yellow");

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

3 Answers3

Linked