如何设置D3.js svg的背景颜色？ [英] How to set the background-color of a D3.js svg?

问题描述

我对造型D3.js SVG不是很熟悉。我创建了一个可折叠树，并提供了将此树下载为SVG / PDF / PNG的选项。这很好用，但生成的文件的背景颜色始终是透明的。是否有可能创建具有特定背景颜色的D3 SVG？我将这个例子用于我的工作：

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

谢谢！

推荐答案

只需添加< rect> 作为第一个显示所需颜色的绘画订单项。

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

这篇关于如何设置D3.js svg的背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！