Question

我正在尝试使用ViewBox＆amp; 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)");

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

以下是一个示例：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)");

Answer 2

你可以获得窗口的大小并设置svg的宽高比。我已经回答了类似的问题。
My answer

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

2 个答案: