Aktualisieren Sie ein d3.js Multiline-Diagramm auf Submit-Ereignis eines HTML-Formulars mit jQuery

Question

Ich habe eine JavaScript-Datei, die Daten aus einem HTML-Formular sammelt, nachdem Übermitteln Schaltfläche gedrückt wurde. Ich benutze jQuery, um dies zu erreichen. Die Daten werden an den Server gesendet, wo sie verarbeitet werden, und die Ergebnisse werden im JSON-Format zurückgesendet. Ich verwende die zurückgegebenen Ergebnisse, um ein einfaches mehrzeiliges Diagramm zu zeichnen.

Alles funktioniert wie erwartet, bis Sie das Formular erneut absenden. Der Graph wird zweimal gezeichnet.

Kann mir jemand helfen, wie ich den Graphen mit den neuen Daten vom Server aktualisieren kann.

Unten ist der JavaScript-Code.

$(document).ready(function() { 
    // Handle the submit button 
    // the id of the form is sma_form 
    $('#sma_form').submit(function(event){ 
     event.preventDefault(); 
     create_post(); 
    }); 

    // AJAX for posting 
    function create_post() { 
     // Notify the user that values are being loaded to the server 
     $("#smaButton").button('loading'); 
     // sanity check 
     console.log("function create post has been called"); 
     // Extract the values from the form 
     // Everything is fine here 
     var ticker = $('#ticker').val(); 
     console.log(ticker); 
     var start_date = $('#backtest_start_date').val(); 
     console.log(start_date); 
     var end_date = $('#backtest_end_date').val(); 
     console.log(end_date); 
     var sma_cash = $("#sma_cash").find("option:selected").val(); 
     console.log(sma_cash); 
     var sma_comm = $("#sma_comm").find("option:selected").val(); 
     console.log(sma_comm); 
     var sma_size = $("#sma_size").find("option:selected").val(); 
     console.log(sma_size); 
     var sma_days = $("#sma_days").find("option:selected").val(); 
     console.log(sma_days); 

     // Handle the ajax call 
     $.ajax({ 
      // the endpoint 
      url : "/equities/create_post/", 
      dataType: "json", 
      // http method 
      type : "POST", 
      // data sent with the post request 
      data : { 
       ticker : ticker, 
       start_date : start_date, 
       end_date : end_date, 
       sma_cash : sma_cash, 
       sma_commission : sma_comm, 
       sma_size : sma_size, 
       sma_days : sma_days 
      }, 

      // handle a successful response 
      success : function(json) { 
       // sanity check 
       console.log("success"); 
       console.log(json.starting_portfolio_value); 
       console.log(json.final_portfolio_value); 

       // Store the json containing graph data 
       var sma_graph_data = JSON.parse(json.graph_data); 

       // set the dimensions and margins of the graph 
       var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
        width = 950 - margin.left - margin.right, 
        height = 500 - margin.top - margin.bottom; 

       // parse the date/time 
       var parseTime = d3.timeParse("%Y-%m-%d"); 

       // set the ranges 
       var x = d3.scaleTime().range([0, width]); 
       var y = d3.scaleLinear().range([height, 0]); 

       // define the 1st line 
       var valueline = d3.line() 
        .x(function(d) { return x(d.date); }) 
        .y(function(d) { return y(d.close); }); 

       // define the 2nd line 
       var valueline2 = d3.line() 
        .x(function(d) { return x(d.date); }) 
        .y(function(d) { return y(d.sma); }); 

       // append the svg obgect to the body of the page 
       // appends a 'group' element to 'svg' 
       // moves the 'group' element to the top left margin 
       // #sma_graph = this is just an id for a div 
       var svg = d3.select("#sma_graph").append("svg") 
        .attr("width", width + margin.left + margin.right) 
        .attr("height", height + margin.top + margin.bottom) 
        .append("g") 
        .attr("transform", 
        "translate(" + margin.left + "," + margin.top + ")"); 

       // format the data 
       sma_graph_data.forEach(function(d) { 
        d.date = parseTime(d.date); 
        d.close = +d.close; 
        d.sma = +d.sma; 
       }); 

       // Scale the range of the data for x-axis 
       x.domain(d3.extent(sma_graph_data, function(d) { 
        return d.date; 
       })); 

       // Scale the range of the data for y-axis 
       y.domain([0, d3.max(sma_graph_data, function(d) { 
        return Math.max(d.close, d.sma); })]); 

       // Add the valueline path. 
       svg.append("path") 
        .data([sma_graph_data]) 
        .attr("class", "line") 
        .attr("d", valueline); 

       // Add the valueline2 path. 
       svg.append("path") 
        .data([sma_graph_data]) 
        .attr("class", "line") 
        .style("stroke", "red") 
        .attr("d", valueline2); 

       // Add the X Axis 
       svg.append("g") 
        .attr("transform", "translate(0," + height + ")") 
        .call(d3.axisBottom(x)); 

       // Add the Y Axis 
       svg.append("g") 
        .call(d3.axisLeft(y)); 

       // Reset the Loading button 
       $("#smaButton").button('reset'); 
      }, 

      // handle a non-successful response 
      error : function(xhr,errmsg,err) { 

      }  
     }); // end of ajax call function 
    }// end of create_post() function 
}); // end of document ready() function 

Answer 1

Wenn Sie nicht zuerst das Element (mit Graphen) zerstören und dann einen neuen Graphen erstellen. Sie können ein Element in jquery durch entfernen:

$('#element').remove(); 

und als einen neuen zu machen und zu initiieren Grafik auf dieses neue Elemente. Also wird es jetzt nicht zweimal gezeigt.