我正在用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。
寻找“响应式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设置的字体大小)。如果不希望这样做,则下面有更多涉及的替代解决方案。