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

Question

我正在尝试使用 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/

Answer 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)");