更新jQueryの

Question

を使用して、HTML形式のイベントを提出する上d3.js複数行のグラフは、私が後にボタンが押された提出したHTMLフォームからデータを収集するJavaScriptファイルを持っています。私はこれを達成するためにjQueryを使用します。 データは処理されるサーバーに送信され、結果はjson形式で返されます。 返された結果を使用して、単純な複数線グラフを描画します。あなたがもう一度フォームを送信するまで

すべてが期待通りに働いています。 グラフは2回描画されます。

誰かが、私は新しいデータがサーバーから入ってくると、グラフを更新することができますどのように私を助けることができます。

以下はJavaScriptコードです。

$(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

最初に要素（グラフを含む）を破棄し、新しい要素を作成しグラフを作成しないでください。

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

以下の方法でjqueryの要素を削除し、新しい要素をグラフにすることができます。今は2度表示されません。