使D3响应：viewBox vs resize（）？ [英] Making D3 responsive: viewBox vs resize()?

问题描述

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

I have to build d3 visualisations that work well both on tablets, Desktop displays, and in some cases very very large 4k+ high resolution cinema size displays.

所以我试图找出使用SVG的'viewBox'属性和'preserveaspectratio'与调用resize函数重新渲染之间的权衡。窗口调整大小事件并使用绝对值。大多数示例，例如此博客条目（ http ：//eyeseast.github.io/visible-data/2013/08/28/responsive-charts-with-d3/ ）建议后者我做这样的事情：

So I'm trying to figure out what the trade off is between using SVG's 'viewBox' attribute with 'preserveaspectratio' vs having a resize function called to re-render on window resize events and use absolute values. Most examples, such as this blog entry (http://eyeseast.github.io/visible-data/2013/08/28/responsive-charts-with-d3/) suggest the latter in which I do something like this:

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调整大小如下：

However, why can't I just use SVG viewBox to let my SVG resize like so:

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

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

I just make everything assuming that my width and height are 900x500px (or whatever), and leverage the fact that SVG is a vector format that takes care of all the fiddly details such as text sizes and margins. I'm struggling to see why so many people when giving examples of responsive or scalable visualisations using D3 favour a resize() function, and I'm very worried that I'm missing something if I go down the viewBox route.

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

So in addition to what mef has said below, one thought is that with a viewBox I'm stuck with a particular aspect ratio. So I might want the height of the visualisation to stay fixed such as in the case of a line or bar chart, but it has it be responsive on its width. With a fixed aspect ratio this isn't possible as changes in width require changes in height. This case requires a resize() function that re-renders to fit to the new aspect ratio.

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

So although a viewBox with a fixed aspect ratio is significantly easier to implement, there are a lot of common cases that require greater control, which necessitates a resize() function and explains the community preference for the more complicated solution as a first and last resort. My use case probably favours the viewBox solution, which is slightly unusual when your requirement is responsiveness.

推荐答案

我建议使用以下逻辑：

• 如果你的可视化在你希望用viewBox技术支持的最小屏幕中可用，坚持下去，不需要进一步看（幸运的是你）:)。


• 否则：缩小可视化时可能会出现以下问题：
  
  
  
  
  • 有太多细节，无法在较小的屏幕中区分
  
  
  • 文字太小，在较小的屏幕上无法阅读
  
  

  然后，您需要使用javascript根据屏幕大小调整您的可视化。这博客文章认真对待可视化的响应性。

  Then you need to use javascript to adapt your visualization based on the screen size. This blog article which is serious about visualizations' responsiveness.

  哦，不要忘记退出调整大小事件监听器。

  这篇关于使D3响应：viewBox vs resize（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！