d3.js - D3JS：无法使条形图适合横向模式下的视口

Question

我有这段代码，它创建了一个水平条形图，它非常适合任何屏幕宽度，但仅在文档加载或重新加载时。当我将手机旋转到横向模式时，它不会根据屏幕的新尺寸再次重新渲染，尽管我尝试使用addEventLisenetfor resize 事件。

我将留下我的代码的运行片段，以便您可以看到我做错了什么。

非常感谢您的帮助。

	var data = [72,70,65,58,51,50,21,15,13]

        var categoryData = ["International assignment allowance and benefits.","Tax and social security cost.","Relocation costs.","Prepared at start of assigment.","Assignee-specific data.","Vendor fees.","Incentive compensation (projected).","Employee benefit plan contributions and deduction.","They are rough calculations."/*"They are detailed and precise"/*,"General data (not assignee-specific)","Updated annually","Updated for change in assignement policy","Updated for approved policy exceptions"*/]


 		var width = $(window).width(),
            barHeight = 20,
            margin = {left:15,top:15,right:15,bottom:15}
												
				var widthScale = d3.scaleLinear()
					.domain(d3.extent(data,function(d){return d }))
					.range([50, width - 40]);



        var svg = d3.select("body")
                        .append("svg")
                        .attr("width", width - margin.left - margin.right)
                        .attr("height"," 100vh")
						.attr("id","SVGCanvas")
		
												
				
		var mainTitle = svg.append("text")
			.attr("class","mainTitle")
			.html("Which of the following statements describe your")
			.attr("transform","translate(5,60)")
			.attr("font-weight","bold")
		
		var mainTitle2 = svg.append("text")
		var mainTitle2 = svg.append("text")
			.attr("class","mainTitle2")
			.html("approach to cost estimates? (Select all that apply.)")
			.attr("transform","translate(5,78)")
			.attr("font-weight","bold")
			.style("float","left")
		
		var mainBarG = svg.append("g")
			.attr("class","mainBarG")
			.attr("transform","translate(5,142)")

        var g = mainBarG.selectAll("g")
                        .data(data)
                        .enter()
                        .append("g")
			.attr("class","bGroup")
                        .attr("transform", function (d, i) {
                            return "translate(0," + ((i * barHeight*3) ) + ")";
                        });

        g.append("rect")
            .attr("width",0)
            .transition()
            .duration(800)
            .delay(function(d,i){return i*25})
            .attr("width", function (d) {
                return widthScale(d);
            })
            .attr("height", barHeight*1.3 )
            .attr("class","bars")
            .attr("fill","#00338D")
            .attr("id", function (d,i) {
                return "barra" + i;
            })

        g.append("text")
            .attr("x", function (d) { return widthScale(d) })
            .attr("y", barHeight / 2)
            .attr("dy", ".6em")
            .attr("dx", "-2.5em")
            .text(function (d) { return  d + '%' })
            .attr("font-size", 13)
            .attr("font-weight", "bold")
			.attr( "rx","20")
			.attr( "ry","20")
            .attr("class","barsText")
			.attr("fill","#FFF")

        g.append("text")
            .data(categoryData)
            .attr("x", 0)
            .attr("y", (barHeight / 2) - barHeight *.8)
            .attr("font-size", 13)
            .attr("class","barsText")
            .text(function (d) { return d })
                setTimeout(function(){
                    $(".barsText").animate({opacity: 1});
                },900);
		

	

 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://d3js.org/d3.v5.min.js"></script>

标签： d3.js