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

javascript d3.js

2022-08-30 01:20:30

我正在绘制一个带有 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");

现在，我希望在用户调整窗口大小时，有些东西可以调整绘图的大小。

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

答案 1

寻找“响应式SVG”，使SVG响应式非常简单，您再也不必担心大小。

以下是我是如何做到的：

d3.select("div#chartId")
   .append("div")
   // Container class to make it responsive.
   .classed("svg-container", true) 
   .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)
   // Fill with a rectangle for visualization.
   .append("rect")
   .classed("rect", true)
   .attr("width", 600)
   .attr("height", 400);

.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;
}

svg .rect {
  fill: gold;
  stroke: steelblue;
  stroke-width: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<div id="chartId"></div>

注意：SVG图像中的所有内容都将随着窗口宽度而缩放。这包括笔触宽度和字体大小（甚至是使用 CSS 设置的字体大小）。如果不需要这样做，下面有更多涉及的替代解决方案。

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

答案 2

Use window.onresize：

function updateWindow(){
    x = w.innerWidth || e.clientWidth || g.clientWidth;
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

    svg.attr("width", x).attr("height", y);
}
d3.select(window).on('resize.updatesvg', updateWindow);

http://jsfiddle.net/Zb85u/1/