Question

56

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

rated 0 times [ 59] [ 3] / answers: 1 / hits: 83913 / 11 Years ago, fri, november 22, 2013, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jameson

Add To Favorites

Follow

Total Points: 534

Total Questions: 103

Total Answers: 102

Location: Lithuania

Member since Fri, Sep 4, 2020

4 Years ago

jameson questions

1 React native navigation v6 authentication flow

Tue, Jan 4, 22, 00:00, 2 Years ago

1 how to make slide transition smoother and not instant on swiper update - Swiper API

Thu, Oct 21, 21, 00:00, 3 Years ago

1 NextJS calling API in a form submit

Tue, Mar 2, 21, 00:00, 3 Years ago

1 React setState inside componentDidUpdare leads to Maximum update depth exceeded

Thu, Dec 10, 20, 00:00, 4 Years ago

1 How to export all components in index.js?

Sat, Jul 4, 20, 00:00, 4 Years ago

View All

answered 11 Years ago serena · Accepted Answer

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