無法使jQuery調整大小事件按預期工作

Question

我有這個功能，可以在多個div上繪制圖表，我提供的此調整大小事件處理程序代碼使圖表能夠響應，但僅按以下順序進行：1）調整瀏覽器大小，2）手動重新加載網頁。

當我調整瀏覽器的大小時，整個頁面完全空白，然后，如果我重新加載瀏覽器，則會繪制出圖表，以完美地適應新的尺寸，但這不是應該的，因為最終用戶不會很高興不得不重新加載每次調整瀏覽器大小時的頁面。

如果在移動設備中可視化頁面，則問題會更大，因為在第一次加載圖表時，將根據設備的尺寸進行完美調整，但是如果用戶旋轉設備並更改為“橫向”模式，就像我提到的整個屏幕將變為空白，直到用戶重新加載。 您能看到我的代碼為我做錯什么提供一些線索嗎？ 謝謝。

 $(document).ready(function(){ draw("chartDivs1"); draw("chartDivs2"); draw("chartDivs3"); draw("chartDivs4"); $(window).resize(function() { $(".chartDivs1,.chartDivs2,.chartDivs3,.chartDivs4,.chartDivs6,").empty(); draw("chartDivs1"); draw("chartDivs2"); draw("chartDivs3"); draw("chartDivs4"); }); }) function draw(chartDiv) { //set width and height in function of the div where my chart will be rendered. var width = $("."+chartDiv).width(); var height = $("."+chartDiv).height() //declare the data (I must change this for a parameter). var data = [ { country: "Moon",growth: 40}, { country: "India", growth: 35}, {country: "Indonesia",growth: 30}, {country: "Russia",growth: 25}, {country: "Mars",growth: 20}, {country: "Pluton",growth: 15}, {country: "House",growth: 10}, {country: "Neptune",growth: 5} ]; //set margins var margin = { top: 20, right: 30, bottom: 30, left: 40 }; var width = width - margin.left - margin.right * 2.5; var height = height - margin.top - margin.bottom; //set scales & ranges var xScale = d3.scaleLinear() .range([0, width * 1.1 ]) var yScale = d3.scaleBand() .range([30, height]).padding(.3) //draw the svg var svg = d3.select("."+chartDiv) .append("svg") .attr("width", width + margin.left + margin.right * 3) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left *1.4 + "," + margin.top + ")") //Add a Title svg.append("text") .attr("x", (width / 2)) .attr("y", 11 ) .attr("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text("Title"); //force data data.forEach(function(d) { return d.growth = +d.growth; }); //set domains yScale.domain(data.map(d => d.country)) xScale.domain([0, d3.max(data, d => d.growth)]) //add X & Y axes and append the bars to Y axis var xAxis = svg.append("g") .attr("class", xAxis) .attr("transform", "translate(" + 0 + "," + height + ")") .call(d3.axisBottom(xScale)) var yAxis = svg.append("g") .attr("class", yAxis) .call(d3.axisLeft(yScale)) .selectAll("rect") .data(data) .enter() .append("rect") .attr("stroke", "transparent") .attr("stroke-width", 4) .attr("class", "bar") .attr("height", yScale.bandwidth()) .attr("x", 0.5) .attr("y", function(d) { return yScale(d.country) }) .attr("width", 0) .transition() .duration(3800) .delay((d, i) => (i + 1) * 200) .ease(d3.easeElastic) .attr("width", function(d) { return xScale(d.growth) }) .style("fill", "#00338D") .on('end', function() { d3.select(this) .on("mouseover", function() { d3.select(this) .transition().duration(600) .attr("stroke", "#6D2077") .attr("stroke-width", 3) .style("fill", "#6D2077") d3.selectAll(".textCircle") .transition().duration(600) .attr("r", yScale.bandwidth() / 1.9) .attr("stroke", "#6D2077") .attr("stroke-width", 1) }) .on("mouseout", function() { d3.select(this) .transition() .duration(600) .attr("stroke", "transparent") .attr("stroke-width", 0) .style("fill", "#00338D") d3.selectAll(".textCircle") .transition().duration(600) .attr("r", yScale.bandwidth() / 2) .attr("stroke", "transparent") }) }) var newG = svg.append("g") newG.selectAll("circle") .data(data) .enter() .append("circle") .attr("class", "textCircle") .attr("cx", d => xScale(d.growth)) .attr("cy", d => yScale(d.country) + yScale.bandwidth() / 2) .attr("r", 0) .transition() .duration(1200) .delay((d, i) => (i + 1) * 450) .attr("r", yScale.bandwidth() / 2) .attr("opacity", 1) .style("fill", "#005EB8") .attr("stroke", "transparent") .ease(d3.easeElastic) var newG4text = svg.append("g").attr("class","newG4text") newG4text.selectAll(".text").data(data) .enter() .append("text") .attr("x", d => xScale(d.growth)) .attr("y", d => yScale(d.country) + yScale.bandwidth()/2) .attr("dx","-.45em") .attr("dy",".4em") .style("font-size",".8em") .style("fill","#FFF") .text(d=>d.growth) } 

 html{ height: 98%; margin: 0; padding: 0; } body{ min-height: 98%; margin: 0; padding: 0; } svg{ text-rendering: geometricPrecision; shape-rendering:geometricPrecision; } .chCols{ border: 1px groove #333333; } .halfVh{ height: 50vh; } .flex-container{ display:flex; -ms-align-items: ; align-items: center; justify-content: center; } 

 <!-- CDNs--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script> <!-- End of CDNs--> <div class="container-fluid"> <div class="row halfVh"> <div class="col-4 chartDivs1 chCols "></div> <div class="col-4 chartDivs2 chCols "></div> <div class="col-4 chartDivs3 chCols"></div> </div> <div class="row halfVh"> <div class="col-4 chartDivs4 chCols flex-container"></div> <div class="col-4 chartDivs5 chCols flex-container"> ...coming soon. </div> <div class="col-4 chartDivs6 chCols flex-container"> ...coming soon. </div> </div> </div> 

Answer 1

您在調整大小方法上有錯字。 當您要清空調整大小的圖表時,從最后刪除。

$(".chartDivs1,.chartDivs2,.chartDivs3,.chartDivs4,.chartDivs6").empty();

為我工作:)