Rendering new graph data adds new graph instead of replacing existing one

Question

I'm using Flask to build a D3 visualization and am requesting user data from a form using JQuery and D3.

$('form').submit(function(e) {
    e.preventDefault();
    d3.json("{{ url_for('crew') }}")
        .header('Content-Type', 'application/x-www-form-urlencoded')
        .post($(this).serialize(), function(error, graph) {

When the user chooses data and presses Submit, a graph shows. The problem is that when Submit is pressed again, another graph appears on top of the old one. I need to refresh before resubmitting the form.

@app.route('/crew', methods=['GET', 'POST'])
def crew():
    form = CrewForm()

    if form.validate_on_submit():
        return current_app.send_static_file(os.path.join('crews/', form.filename.data))

    return render_template('Crew.html', form=form)

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

In your json callback method clear the previous chart using either jQuery or d3 method. Take a look at this link it might help you. NVD3, Clear svg before loading new chart

edited May 23 '17 at 11:43

Community

1
1

answered May 26 '15 at 21:26

ShankarSangoli

69,612
13
93
124

This worked, thank you! I added `d3.selectAll("svg > *).remove();` and it clears the graph before adding the new one :) – gbhrea May 26 '15 at 22:30

Rendering new graph data adds new graph instead of replacing existing one

1 Answers1