Question

我必须在平板电脑，桌面显示器以及某些非常大的4k +高分辨率影院尺寸显示器上构建d3可视化功能。

所以我试图找出使用SVG＆＃39; viewBox＆＃39;之间的权衡。属性为＆＃39; preserveaspectratio＆＃39; vs有一个resize函数调用来重新渲染窗口大小调整事件并使用绝对值。大多数示例，例如此博客条目（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%')

我只是假设我的宽度和高度都是900x500px（或其他），并利用SVG是一种矢量格式来处理所有繁琐的细节，如文本大小和边距。我很难理解为什么这么多人在使用D3提供响应式或可扩展的可视化的例子时会使用resize（）函数，而且我非常担心如果我错过了一些东西沿着viewBox路线走。

编辑：

因此，除了mef在下面所说的内容之外，还有一个想法是，使用viewBox我会遇到特定的宽高比。因此，我可能希望可视化的高度保持固定，例如在线条或条形图的情况下，但它具有响应的宽度。由于宽度的变化需要改变高度，因此使用固定的宽高比是不可能的。这种情况需要resize（）函数重新渲染以适应新的宽高比。

因此，虽然具有固定宽高比的viewBox更容易实现，但是有很多常见情况需要更大的控制，这需要resize（）函数并且首先解释社区对更复杂解决方案的偏好不得已。我的用例可能有利于viewBox解决方案，当您的需求是响应时，这有点不寻常。

Answer 1

我建议使用以下逻辑：

如果您想要使用viewBox技术支持的最小屏幕中可以使用您的可视化，请坚持下去，不需要进一步查看（幸运的是:)）
否则：缩小可视化时可能会出现以下问题：
- 有太多细节，无法在较小的屏幕中区分
- 文字太小，在较小的屏幕中无法阅读

然后，您需要使用javascript根据屏幕大小调整您的可视化。这个blog article对于可视化非常重要。响应性。

哦，不要忘记debounce your resize event listener。

使D3响应：viewBox vs resize（）？

编辑：

1 个答案: