Các phần tử SVG có thể định lại được bằng JavaScript và D3

Question

hiện bất kỳ ai biết mã js nào cũng cho phép phần tử svg (toàn bộ nội dung) được thay đổi kích cỡ tùy thuộc vào kích thước cửa sổ do người dùng đặt. người dùng của tôi sẽ muốn xem đồ họa d3 trong chế độ xem tùy chỉnh nhỏ trên máy tính để bàn hoạt động của họ. trong khi đó, những người khác sẽ có nó chạy toàn màn hình trên máy tính để bàn hoạt động của họ. điều này có nghĩa là các đồ thị sẽ cần phải tự thay đổi kích thước chúng tùy theo sở thích của người dùng.

Answer 1

Bạn có thể điều chỉnh svg.attr ("chiều rộng") .xuất ("chiều cao") hoặc khi tải trang hoặc thay đổi kích thước, nhưng bạn cần thêm hành vi trong mã của mình để chuyển các phần tử d3 thành kích thước mới.

Bạn cũng có thể xem xét các thuộc tính của một đối tượng .viewBox svg, mà sẽ mở rộng quy mô các yếu tố svg động, nhưng tôi đã tìm thấy hành vi của nó giữa các trình duyệt khác nhau để có đốm:

http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

Answer 2

tôi đặt cùng một bản demo về hành vi mong muốn này cách đây vài ngày. Kiểm tra nó ra ở đây - http://bl.ocks.org/4444770

Về cơ bản, bạn nghe kích thước cửa sổ, áp dụng biến đổi tỷ lệ cho phần tử g bao bọc tất cả các phần tử SVG và điều chỉnh kích thước của SVG gốc. Gọi mã này khi tải trang và thay đổi kích thước cửa sổ, trong đó "vùng chứa" là div giữ số SVG:

d3.select("g").attr("transform", "scale(" + $("#container").width()/900 + ")"); 
$("svg").height($("#container").width()*0.618); 

Đây là phương pháp hay nếu SVG của bạn được đặt trong div.

Cách khác là sử dụng hộp xem SVG, như được minh họa bởi Mike Bostock tại đây - http://bl.ocks.org/harlantwood/raw/6900108/. Phương pháp này là tốt nhất nếu bạn đang thêm SVG vào cơ thể, và tôi chắc chắn có một cách để sử dụng phương pháp này khi đặt SVG bên trong một div, nhưng tôi không thể tìm thấy một giải pháp, và do đó tạo ra ở trên làm việc xung quanh.