[英]How to set the background-color of a D3.js svg?
我對 D3.js SVG 的樣式不是很熟悉。 我創建了一個可折疊的樹,並將提供一個選項來將這棵樹下載為 SVG/PDF/PNG。 這很好用,但生成的文件的背景顏色總是透明的。 是否有可能創建具有特定背景顏色的 D3 SVG? 我在我的工作中使用了這個例子:
http://bl.ocks.org/mbostock/4339083
謝謝!
只需添加<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 + ")");
您可以將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;
}
使用 .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");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.