使用 ViewBox 根据窗口大小调整 svg 的大小

【问题标题】：Using ViewBox to resize svg depending on the window size使用 ViewBox 根据窗口大小调整 svg 的大小
【发布时间】：2012-11-17 21:41:10
【问题描述】：

当窗口大小发生变化时，我正在尝试使用 ViewBox 和 preserveAspectRatio 自动调整我的 d3.svg.arc ...

var svg = d3.select("#chart").append("svg") 
  .append("g")
  .attr("viewBox", "0 0 700 500")
  .attr("preserveAspectRatio", "xMinYMin meet")
  .attr("transform", "translate(" + r + "," + r +") rotate(180) scale(-1, -1)");

我有点困惑为什么它根本不起作用 - 我还尝试将保留设置为“无”并删除我拥有的任何设置边距。但仍然没有运气 - 任何帮助或建议将不胜感激。

这是一个例子：http://jsfiddle.net/xwZjN/53/

【问题讨论】：

您可以获取窗口大小并设置 svg 的纵横比。我已经回答了一个类似的问题。
My answer

标签： javascript svg d3.js

【解决方案1】：

您正在将viewBox 和preserveAspectRatio 应用于g 元素，它们需要应用于svg 元素：

var svg = d3.select("#chart").append("svg") 
  .attr("viewBox", "0 0 700 500")
  .attr("preserveAspectRatio", "xMinYMin meet")
     .append("g")
     .attr("transform", "translate(" + r + "," + r +") rotate(180) scale(-1, -1)");

【讨论】：

谢谢。但有趣的是，当我应用你的答案时，我的弧线似乎进入了角落 - 我改变了 x & y 平移，但它不起作用。但是，如果我这样做 - jsfiddle.net/xwZjN/54 似乎可行。有什么原因吗？
因为您的 svg 变量实际上包含 g 元素，而不是 SVG。但是，看到 D3 示例，似乎约定是用 svg 变量命名根级别 g，所以你做对了（答案已更新）。