Question

我有一个页面，其中包含一个下拉菜单，可以选择要显示的几个条形图中的一个。更改下拉选择时页面不正确地重新加载。我已将罪魁祸首缩小到这条线：

$("svg").remove();

当我注释掉该行时，HTML会在不重新加载页面的情况下进行更改。但我需要那条线（或类似的东西），因为我希望在选择新图表时，上一张图表会消失。

我也试过

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

但同样的事情发生了。

我添加了

event.preventDefault();

但这也无济于事。

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

我的页面是here，如果看到整个内容会有所帮助。请注意下拉选项更改后页面的重新加载方式。

（1月3日更新：我已按照以下评论/答案中的建议，但没有任何帮助。我仍然遇到这个问题。）

Answer 1

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

Answer 2

我遇到了同样的问题。每当我刷新我的图表时，我都会对整个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();
}

希望这有帮助！

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

2 个答案: