我怎样才能让这个 globe visualization(svg) 响应不同的屏幕尺寸？

Question

语言： Javascript、HTML 和 CSS。

框架： D3.js

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

题：

我怎样才能让地球可视化成为响应不同的屏幕尺寸？ 例如在 iphone globe width width = 200px 在 ipad globe width = 300px

首先我不想设置断点来调整<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 应该能够选择计算出的大小。