javascript - 使 D3 响应 : viewBox vs 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 在下面所说的内容之外，还有一种想法是，对于 viewBox，我受制于特定的纵横比。所以我可能希望可视化的高度保持固定，例如在折线图或条形图的情况下，但它可以响应其宽度。对于固定的宽高比，这是不可能的，因为宽度的变化需要高度的变化。这种情况需要一个 resize() 函数重新渲染以适应新的纵横比。

因此，虽然具有固定宽高比的 viewBox 更容易实现，但有很多常见情况需要更好的控制，这需要一个 resize() 函数，并解释了社区对更复杂的解决方案的偏好作为第一个和最后的手段。我的用例可能更喜欢 viewBox 解决方案，当您的需求是响应能力时，这有点不寻常。

Answer 1

我建议使用以下逻辑:

• 如果您的可视化在您希望使用 viewBox 技术支持的最小屏幕上可用，请坚持下去，无需进一步查看(幸运的是:))
• 否则:在缩小可视化时，您可能会遇到以下问题:
  • 细节太多，小屏幕无法区分
  • 文本太小，在较小的屏幕上无法阅读

然后您需要使用 javascript 根据屏幕大小调整您的可视化效果。这blog article这对可视化的响应能力很重要。

哦，别忘了 debounce your resize event listener .