Cách đặt màu nền của svg D3.js?

Question

Tôi không phải là rất quen thuộc trong việc tạo kiểu D3.js SVG. Tôi tạo một cây có thể gập lại và sẽ cung cấp tùy chọn tải xuống cây này dưới dạng SVG/PDF/PNG. Điều này làm việc tuyệt vời nhưng màu nền của các tệp kết quả luôn trong suốt. Có khả năng tạo SVG D3 với màu nền cụ thể không? Tôi đã sử dụng ví dụ này cho công việc của mình:

http://bl.ocks.org/mbostock/4339083

Cảm ơn bạn!

Answer 1

Chỉ cần thêm <rect> làm mục thứ tự sơn đầu tiên hiển thị màu mà bạn muốn.

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

Bạn có thể sử dụng SVG là một thành phần HTML, bạn có thể thiết lập các thuộc tính CSS của nó:

Ví dụ, vào việc tạo ra các svg, bạn thiết lập một lớp học:

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

Trong của bạn CSS, bạn có thể xác định thuộc tính:

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