在d3.js中调整窗口大小时调整svg大小

问题描述

我用d3.js绘制散点图。在此问题的帮助下：

我使用这个答案：

  var w = window，
d = document，
e = d.documentElement，
g = d.getElementsByTagName（'body'）[0]，
x = w.innerWidth || e.clientWidth || g.clientWidth，
 y = w.innerHeight || e.clientHeight || g.clientHeight; 
  

所以我可以像这样将我的剧情贴合到用户的窗口：

  var svg = d3.select（body）append（svg）
 .attr（width，x） 
 .attr（height，y）
 .append（g）; 
  

现在我想，当用户调整窗口大小时， / p>

PS：我的代码中没有使用jQuery。

解决方案

寻找响应SVG，它是相当简单的SVG响应，你不必再担心大小了。

以下是我的操作方式：

  d3.select div＃chartId）
 .append（div）
 .classed（svg-container，true）//容器类使其响应
 .append（svg ）
 //响应SVG需要这两个属性，没有宽度和高度attr 
 .attr（preserveAspectRatio，xMinYMin meet）
 .attr（viewBox，0 0 600 400）
 //类响应
 .classed（svg-content-responsive，true）; 
  

CSS代码：

  .svg-container {
 display：inline-block; 
 position：relative; 
 width：100％; 
 padding-bottom：100％; / * aspect ratio * / 
 vertical-align：top; 
 overflow：hidden; 
} 
 .svg-content-responsive {
 display：inline-block; 
 position：absolute; 
 top：10px; 
 left：0; 
} 
  

更多信息/教程：

I'm drawing a scatterplot with d3.js. With the help of this question :
how to get web page size, browser window size, screen size in a cross-browser way?

I'm using this answer :

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

So I'm able to fit my plot to the user's window like this :

var svg = d3.select("body").append("svg")
        .attr("width", x)
        .attr("height", y)
        .append("g");

Now I'd like that something takes care of resizing the plot when the user resize the window.

PS : I'm not using jQuery in my code.

解决方案

Look for 'responsive SVG' it is pretty simple to make a SVG responsive and you don't have to worry about sizes any more.

Here is how I did it:

d3.select("div#chartId")
   .append("div")
   .classed("svg-container", true) //container class to make it responsive
   .append("svg")
   //responsive SVG needs these 2 attributes and no width and height attr
   .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 600 400")
   //class to make it responsive
   .classed("svg-content-responsive", true);

The CSS code:

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}

More info / tutorials:

http://thenewcode.com/744/Make-SVG-Responsive

http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

这篇关于在d3.js中调整窗口大小时调整svg大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！