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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

以上是 在d3.js中调整窗口大小时调整SVG大小 的全部内容， 来源链接： utcz.com/qa/424585.html

回到顶部