Question

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

我尝试在每次调整窗口大小时只放入一个白色矩形，但是图形加载时间太长，以至于在调整大小时会闪烁，并且看起来不佳。还要注意：我的HTML文件中有功能chart()在加载时运行。这是外观的链接： https://imgur.com/iuDXjpC

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

我应该删除所有内容并在调用“ chart（）”时重绘它吗？还是应该更好地优化代码，然后在旧的窗口大小上放一个白色矩形，以便将所需的窗口放在顶部。

Answer 1

如果要使用调整大小事件，您可以做两件事。要么在绘制（svg}之前删除svg.selectAll("*").remove();的所有子级，要么，如果要优化代码，请将数据的加载和处理以及图表的绘制分为两部分。 / p>

首先，在加载数据时，将其存储为变量，并使用.data属性基于其添加/删除SVG节点。例如，如果数据中有三个条，则在此处添加rect节点，但不对其位置进行任何操作。

然后，在也需要重新调整大小的函数内部，首先获取xScale和yScale变量，然后以新的大小调用.range()。取给您分配了三个rect节点的变量，并根据加载时的值设置它们的x，y，width和height属性他们在第一部分。请注意，所有这些值都间接基于您传递给xScale和yScale .range()函数的值。

在没有看到更多代码的情况下我无法为您提供具体帮助，因此我希望这会有所帮助。

如何修复图形，以便在调整大小时不会覆盖自身

1 个答案: