使D3响应式：viewBox与resize()有何不同？

Question

我需要构建适用于平板电脑、桌面显示器以及某些情况下非常大的4K+高分辨率电影屏幕的d3可视化。

因此，我正在尝试弄清楚在使用SVG的'viewBox'属性与'preserveaspectratio'之间与调用重置函数重新渲染窗口大小调整事件并使用绝对值之间的权衡。大多数示例（例如此博客文章http://eyeseast.github.io/visible-data/2013/08/28/responsive-charts-with-d3/）建议后者，在其中执行以下操作：

d3.select(window).on('resize', resize)

resize() {
// rerender each individual element with the new width+height of the parent node
d3.select('svg')
 .attr('width', newWidth)
//etc... and many lines of code depending upon how complex my visualisation is
}

但是，为什么我不能只使用SVG viewBox来让我的SVG调整大小呢：

d3.select('svg')
  .attr( 'preserveAspectRatio',"xMinYMin meet")
  .attr("viewBox", "0 0 900 500")
  .attr('width', '100%')

我假设我的宽度和高度是900x500像素（或其他大小），然后利用SVG作为矢量格式处理所有琐碎的细节，如文本大小和边距。我很难理解为什么在使用D3制作响应式或可缩放可视化的示例时，有这么多人喜欢使用resize()函数，我非常担心如果我选择viewBox路线会错过一些东西。

补充说明：除了mef下面说的内容，还有一种情况是，在使用固定高度（例如线条或条形图）的可视化中，我可能希望高度保持不变，但宽度需要响应。由于固定的宽高比，这种情况并不可行。这种情况需要一个resize()函数来重新呈现以适应新的宽高比。

因此，虽然具有固定宽高比的viewBox实现更容易，但也有许多常见情况需要更精细的控制，这就需要一个resize()函数，并解释了为什么社区偏向更复杂的解决方案作为首选和最后手段。我的用例可能更适合viewBox解决方案，这在要求响应性时略有不同。

- user4063786

Answer 1

我建议采用以下逻辑：

• 如果你的可视化技术使用viewBox技巧支持最小屏幕，那么坚持使用它即可，无需再寻找其他方法（你真是太幸运了 :))
• 否则，当缩小可视化时，可能会出现以下问题：
  • 细节太多，在较小的屏幕上无法区分
  • 文字过小，在较小的屏幕上无法阅读

然后，您需要使用javascript根据屏幕大小来调整可视化。这篇博客文章非常注重可视化的响应能力。

哦，别忘了防抖动你的调整大小事件监听器。

- Mehdi

---

我想在我的情况下，我面临的不寻常问题是扩大而不是缩小规模。从大型平板电脑和桌面显示器到高分辨率和屏幕尺寸的视频墙。 - user4063786

博客文章链接已经失效。 - ben3000

谢谢。我刚刚更新了链接，指向一篇文章的存档副本。 - Mehdi