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

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

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

---

下面是一个示例：

您正在将

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翻译，但它不起作用。然而，如果我这样做，这似乎是可行的。有什么原因吗？因为

svg

变量实际上包含

g

元素，而不是svg。但是，从D3示例来看，惯例似乎是使用一个

svg

变量命名根级别

g

，这样就正确了（答案已更新）。您可以获得窗口的大小并设置svg的纵横比。我已经回答了一个类似的问题。