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

해결책을 찾았습니다. 다음은 나를 위해 일했다. 어쨌든 고마워. :)

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

Answer 2

너비와 높이를 설정하고 있습니다. 경험에 비추어 볼 때, 너비와 높이가 설정된 SVG는 크기를 조정하기가 매우 어렵습니다. 내가보기 상자를 사용하고 CSS로 사이징을 할.

Answer 3

코드는 한 번만 실행되고 크기는 초기 창 높이 및 너비 값으로 설정됩니다. 창 크기가 변경 될 때 크기를 조정하려면 window.onresize 이벤트에서 크기를 조정해야합니다.

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