jQuery和d3：为什么我在使用$（“ svg”）。remove（）时重新加载页面？

Question

I have a page that includes a dropdown menu to choose one of several bar charts to display. The page improperly reloads when the dropdown selection is changed. I have narrowed the culprit to this line:

$("svg").remove();

When I comment out that line, the HTML changes without the page reloading. But I need that line (or something similar), because I want the previous chart to go away when the new chart is selected.

I've also tried

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

but the same thing happens.

I've added

event.preventDefault();

but that doesn't help either.

I've made a jsfiddle to show my relevant HTML and JS/d3.

My page is here if seeing the whole thing will help. Note how the page reloads when the dropdown selection is changed.

(Update Jan. 3: I have followed the suggestions in the comments/answers below, but nothing has helped. I'm still having this problem.)

Answer 1

Nope, your page is not reloading. ( If it does reload you will see a spin icon in most of the browsers title). Like @Mansov told in the comment It is the margin that changes when you .remove() and add the svg .

Answer 2

I was having this same problem. Whenever I refreshed my chart, I was doing a .remove() to the entire svg reference, and then calling my build() function again.

In effect, what was happening was the <div> containing the SVG was collapsing to 0 height, causing the page to scroll back up to fit all the remaining content, and then when I rebuilt the chart the page would remain scrolled at the top.

So what I did was make a "frame" for the chart svg to sit on top of:

//===================================================== 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)
        ;
}    

and then created a group that held the chart:

//===================================================== 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)
    ;
}

Then when I needed to rebuild the chart, I deleted the group, and not the whole SVG:

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

Hope this helps!