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