Javascript 如何修复图形，使其不会'；调整大小时，不要写在其自身上

我试图使我的图形在更改时与窗口一起调整大小。我将生成图形的代码放入函数中，并添加了一个事件侦听器，在添加时使用更新的高度和宽度变量调用主函数，但它不会删除已添加的条、线、轴和标签，等等，造成了一种效果，即图形正确地重新缩放，但没有删除所有的旧内容，因此我的图形上有数百个条

我试着在每次调整窗口大小时只放入一个白色矩形，但是加载图形所需的时间太长，以至于它在调整大小时闪烁，看起来不太好。 还要注意的是：我在HTML文件中加载了函数

chart（）

。下面是一个链接，指向它的外观：

---

我是否应该在调用“chart（）”时删除所有内容并重新绘制它？或者我应该优化我的代码，然后在旧的窗口大小上放一个白色矩形，以便所需的矩形位于顶部。

如果要使用调整大小事件，可以做两件事。在绘制（

svg.selectAll（“*”）.remove（）；

）任何内容之前删除

svg

的所有子项，或者，如果要优化代码，请将数据的加载和处理以及图表的绘制分为两部分

首先，在加载数据时，将其存储为变量，并使用

.data

属性基于它添加/删除SVG节点。例如，如果数据中有三个条形图，则在此处添加

rect

节点，但不对其位置做任何操作

然后，在同样在resize上调用的函数中，首先获取

xScale

和

yScale

变量，并使用新的大小调用

.range（）

。获取分配给三个

rect

节点的变量，并根据在第一部分中加载属性时的值设置它们的

x

、

y

、

宽度

和

高度

属性。请注意，所有这些值都间接基于传递给

xScale

和

yScale

.range（）

函数的值

如果没有看到更多的代码，我无法更具体地帮助您，因此我希望这能有所帮助

var margin = {top: 10, right: 70, bottom: 100, left: 70},
    w = window.innerWidth, 
    h = window.innerHeight;
var topBottom = margin.top + margin.bottom;
var leftRight = margin.left + margin.right;  
var mid = {x: w/2, y:h/2};
var svg = d3.select("#svgDiv")
  .append("svg")
  .attr("width",w)
  .attr("height",h)
  .attr("margin","auto");
function chart(){
    w = window.innerWidth; 
    h = window.innerHeight;
    d3.csv("test.csv").then(function(dataset) {
        part where I make the graph
    }
}
window.addEventListener("resize",chart);