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元素：gsvg

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