Javascript d3js:Svg元素在更改窗口大小时未调整大小

我有一个svg元素，我正在努力使它具有响应性。下面给出了我正在使用的代码，但这不起作用。我不明白这个问题

 var svg = d3.select('.chart')
            .append('svg')
            .attr('class', 'chart')
            .attr("width", width + margin + margin)
            .attr("height", height + margin + margin + 10   )
            .attr("viewBox", "0 0 680 490")
            .attr("preserveAspectRatio", "xMinYMin meet")
            .append("g")
            .attr("transform", "translate(" + margin + "," + margin + 
 ")");

---

您正在设置宽度和高度。根据经验，我知道设置了宽度和高度的SVG很难调整大小。我只使用viewbox，并使用CSS进行大小调整。

您正在那里设置宽度和高度。根据经验，我知道设置了宽度和高度的SVG很难调整大小。我只使用viewbox并使用CSS调整大小。

该代码将只运行一次，并将其大小设置为初始窗口高度和宽度值。若要在更改窗口大小时调整其大小，则需要在事件发生时调整其大小

---

该代码将只运行一次，并将其大小设置为初始窗口高度和宽度值。若要在更改窗口大小时调整其大小，则需要在事件发生时调整其大小

---

我找到了解决办法。跟随对我有用。无论如何，谢谢你：）

---

我找到了解决办法。跟随对我有用。无论如何，谢谢你：）

window.onresize = function() {
    // code to change svg element's width/height here
}

var svg = d3.select('.chart')
            .classed("svg-container", true)
            .append('svg')
            .attr('class', 'chart')
            .attr("viewBox", "0 0 680 490")
            .attr("preserveAspectRatio", "xMinYMin meet")
            .classed("svg-content-responsive", true)
            .append("g")
            .attr("transform", "translate(" + margin + "," + margin + ")");

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}