我怎樣才能讓這個 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 應該能夠選擇計算出的大小。