Sử dụng ViewBox để thay đổi kích thước svg tùy thuộc vào kích thước cửa sổ

Question

Tôi đang cố gắng sử dụng ViewBox & preserveAspectRatio để tự động điều chỉnh d3.svg.arc tôi khi kích thước cửa sổ đã thay đổi ...

var svg = d3.select("#chart").append("svg") 
    .append("g") 
    .attr("viewBox", "0 0 700 500") 
    .attr("preserveAspectRatio", "xMinYMin meet") 
    .attr("transform", "translate(" + r + "," + r +") rotate(180) scale(-1, -1)"); 

Tôi một chút bối rối tại sao nó không hoạt động chút nào - Tôi cũng đã cố gắng thiết lập bảo toàn thành "none" & xóa bất kỳ lề đã đặt nào mà tôi có. nhưng vẫn không có may mắn - bất kỳ trợ giúp hoặc lời khuyên nào sẽ được đánh giá cao.

Dưới đây là một ví dụ: http://jsfiddle.net/xwZjN/53/

Answer 1

Bạn đang áp dụng viewBox và preserveAspectRatio tới phần tử g, họ cần phải được áp dụng cho các svg yếu tố:

var svg = d3.select("#chart").append("svg") 
    .attr("viewBox", "0 0 700 500") 
    .attr("preserveAspectRatio", "xMinYMin meet") 
    .append("g") 
    .attr("transform", "translate(" + r + "," + r +") rotate(180) scale(-1, -1)"); 

Answer 2

bạn có thể nhận được kích thước của cửa sổ và thiết lập tỷ lệ khung hình cho svg. Tôi đã trả lời một câu hỏi tương tự.
My answer