IE11 không chấp nhận chiều cao và chiều rộng SVG khi sử dụng D3

Question

Tôi đang sử dụng sau đây để thiết lập một SVG đáp ứng

outerHeight = 400; 
    outerWidth = 600; 

    var margin = {top: 20, right: 20, bottom: 30, left: 40},   
     width = outerWidth - margin.left - margin.right, 
     height = outerHeight - margin.top - margin.bottom; 

    var svg = d3.select("div#simulation-1")     
     .append("svg") 
     .attr("preserveAspectRatio", "xMinYMin meet") 
     .attr("viewBox", "0 0 "+outerWidth+" "+outerHeight) 
     .attr("class","svg"); 

này hoạt động hoàn hảo trong Chrome. Trong IE11 và Firefox tuy nhiên toàn bộ biểu đồ được thu nhỏ lại (trục và phông chữ rất nhỏ) và giá trị cho khung nhìn là

viewbox="0 0 1936 1056" 

Vì một số lý do, nó không chấp nhận chiều cao được chỉ định và với. Tuy nhiên, nó vẫn còn có tính chất hỗ trợ.

fiddle bao gồm: https://jsfiddle.net/4p73n364/

Bất kỳ ý tưởng? Trân trọng, Jean

Answer 1

IE có lỗi trong đó không quy mô SVG đúng cách nếu bạn không cung cấp cả chiều rộng và chiều cao.

Để khắc phục vấn đề đó, bạn có thể sử dụng the <canvas> trick.

https://jsfiddle.net/4p73n364/12/

Tôi không phải là người sử dụng d3, vì vậy tôi không thể giúp bạn với vấn đề nhãn nhỏ xíu.

Answer 2

tôi đã nhận nó làm việc trong IE theo cách sau:

<svg id="yourid" width="100%" height="100%" viewBox="750 0 2500 2500"> 

Phong cách được nối với một js-script. Đây là một phiên bản rất cũ của một trong các dự án của tôi: link.

var svg = d3.select("#someid") 
      .append("svg") 
      .attr("width", "100%") 
      .attr("height", "100%") 
      .attr("id", "yourid") 
      .attr("viewBox", "750 0 2500 2500"); 

Answer 3

Thay vì cung cấp đôi khi unknows chiều rộng và chiều cao chúng ta có thể sử dụng Viewport tỷ lệ như sau:

style='width:100vw; height:100vh;'