D3.js svg का पृष्ठभूमि-रंग कैसे सेट करें?

Question

मैं डी 3.जेएस एसवीजी के स्टाइलिंग में बहुत परिचित नहीं हूं। मैं एक ढहने वाला पेड़ बनाता हूं और इस पेड़ को एसवीजी/पीडीएफ/पीएनजी के रूप में डाउनलोड करने का विकल्प प्रदान करूंगा। यह बहुत अच्छा काम करता है लेकिन परिणामी फाइलों का पृष्ठभूमि रंग हमेशा पारदर्शी होता है। क्या एक विशिष्ट पृष्ठभूमि रंग के साथ डी 3 एसवीजी बनाने की संभावना है? मैं अपने काम के लिए इस उदाहरण का इस्तेमाल किया:

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 बनाने पर, आप एक वर्ग सेट:

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

में अपने सीएसएस आप संपत्ति को परिभाषित कर सकते हैं:

.graph-svg-component { 
    background-color: AliceBlue; 
}