jquery和d3:当我使用$(“svg”）.remove(）时，为什么我的页面会重新加载

jquery and d3: why does my page reload when I use $("svg").remove()?

本文关键字：为什么 我的 加载 新加载 remove d3 svg jquery      更新时间：2023-09-26

我有一个页面，其中包括一个下拉菜单，可以从几个条形图中选择一个进行显示。当下拉选择发生更改时，页面会不正确地重新加载。我已经把罪魁祸首缩小到这一行：

$("svg").remove();

当我注释掉那一行时，HTML会发生变化，而不会重新加载页面。但我需要那条线（或类似的东西），因为我希望在选择新图表时，上一个图表会消失。

我也试过

d3.select("svg").remove();

但同样的事情也会发生。

我添加了

event.preventDefault();

但这也无济于事。

我制作了一个jsfiddle来展示我的相关HTML和JS/d3。

如果看到整件事会有所帮助，我的页面就在这里。请注意，当下拉选择发生更改时，页面是如何重新加载的。

（1月3日更新：我遵循了下面评论/答案中的建议，但没有任何帮助。我仍然有这个问题。）

不，您的页面没有重新加载。（如果重新加载，您将在大多数浏览器标题中看到一个旋转图标）。就像@Mansov在评论中所说的那样，当你.remove()并添加svg时，边距会发生变化。

我也遇到了同样的问题。每当刷新图表时，我都会对整个svg引用执行.remove()，然后再次调用build()函数。

实际上，发生的情况是，包含SVG的<div>折叠到0高度，导致页面向上滚动以容纳所有剩余内容，然后当我重建图表时，页面将保持在顶部滚动。

所以我做的是为图表svg制作一个"框架"，放在上面：

//===================================================== Initialize build            
function initializeBuild() {
    bilSVG = this.d3.select(rawSvg)
        .append("svg");
    calculateMargins();
    bilSVG
        .attr("width", width)
        .attr("height", height)
        .append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", width)
        .attr("height", height)
        .style("opacity", .0)
        ;
}

然后创建了一个持有图表的小组：

//===================================================== build            
function build() {
    chartGroup = bilSVG
        .append("g")
        .attr("class","bil chartgroup")
        .attr("transform", function(d) {
            return "translate(" + width / 2 + "," + width / 2 + ")";
        })
        .attr("x", width / 2)
        .attr("y", width / 2)
    ;
}

然后，当我需要重建图表时，我删除了组，而不是整个SVG:

//===================================================== rebuild
function rebuild() {
    chartGroup = bilSVG.select(".chartgroup");
    chartGroup.remove();
    build();
}

希望这能有所帮助！

相关文章：