使D3响应:viewBox vs resize()？

Question

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

所以我试图弄清楚使用SVG的'viewBox'属性和'preserveaspectratio'与调用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根据屏幕大小调整您的可视化.这篇博客文章认真对待可视化的响应性.

哦,不要忘记去掉你的resize事件监听器.