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

如何设置D3.js svg的背景颜色？

2 个答案: