如何設置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; 
}