使用D3时，IE11不接受SVG高度和宽度 [英] IE11 does not accept SVG height and width when using D3

问题描述

我正在使用以下来设置一个响应式SVG

  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）; 
  

这在Chrome中完美运作。在IE11和Firefox中，整个图表都缩小了（轴和字体很小），viewBox的值是

$ $ p $ code> viewbox =0 0 1936 1056

由于某些原因，它不接受指定的高度和。不过它仍然很有反应。

包括小提琴： https：// jsfiddle.net/4p73n364/

有什么想法？
Regards，
Jean

解决方案

IE有一个错误，你不要同时提供宽度和高度。

要解决这个问题，你可以使用 < canvas> 技巧。 $ b https://jsfiddle.net/4p73n364/12/

我我不是d3用户，所以我不能帮你解决这个小问题。

I am using the following to setup a responsive SVG

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

This works perfectly in Chrome. In IE11 and Firefox however the whole chart is scaled down (axis and font are tiny) and the value for the viewBox is

viewbox="0 0 1936 1056"

For some reason it does not accept the specified height and with. However it still is reponsive.

Included fiddle: https://jsfiddle.net/4p73n364/

Any idea? Regards, Jean

解决方案

IE has a bug where it doesn't scale the SVG properly if you don't provide both the width and height.

To fix that issue, you can use the <canvas> trick.

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

I'm not a d3 user, so I can't help you with the tiny labels issue.

这篇关于使用D3时，IE11不接受SVG高度和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！