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

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

Answer 3

使用 .style() 来控制 CSS 属性：

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