d3js：svg元素在更改窗口大小時未調整大小

Question

我有一個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 + 
 ")");

Answer 1

您在此處設置寬度和高度。 根據經驗，我知道很難設置寬度和高度的SVG。 我僅使用viewbox並使用CSS進行大小調整。

Answer 2

該代碼將只運行一次，並將其大小設置為初始窗口的高度和寬度值。 如果要在更改窗口大小時調整大小，則需要在window.onresize事件上調整大小。

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

Answer 3

我找到了解決方案。 以下對我有用。 不管怎么說，還是要謝謝你 ：）

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;
}