我怎样才能让这个全球可视化(Svg)对不同的屏幕大小做出反应？

Question

语言： Javascript，和CSS。

框架： D3.js

指向代码的链接： https://observablehq.com/@michael-keith/draggable-globe-in-d3

问题：

我如何使全球可视化成为响应不同的屏幕大小？例如，在iphone上，全球宽度=200 at，ipad全球宽度=300 at。

首先，我不希望设置断点来调整<svg>的大小

我尝试过的：

我试过使用属性viewBox和preserveAspectRatio。

  .attr("viewBox", `0 0 ${width} ${height}`)
  .attr("preserveAspectRatio", "xMinYMin meet")

然而，什么都没有发生。我猜可能是因为如何设置高度和宽度。例如：

let width = d3.select("#map").node().getBoundingClientRect().width
let height = 500

欢迎任何想法。

Answer 1

您是否尝试直接在svg标记上使用viewBox，而不指定宽度或高度？无论如何，您的javascript应该能够选择计算的大小。