D3js code when called twice duplicates the graph instead of refreshing

Question

Here is my D3js code

    function ShowGraph(data)
{

    var w = 600,
                h = 600,
                padding = 36,
                p = 31,
                     


        

Answer 1

You can also remove your old svg before appending the new one..

 d3.select("#D3line").selectAll("svg").remove();
 var svg = d3.select("#D3line").append("svg")
                    .attr("width", w)
                    .attr("height", h);

Answer 2

Here you always append a new SVG element (.append('svg')):

var svg = d3.select("#D3line").append("svg")
                        .attr("width", w)
                        .attr("height", h);

So instead of using a new SVG element (and thus a new graph), just maintain a link to the first selected graph and override it or select the SVG again:

   var svg = d3.select( '#D3line svg' );
   if ( !svg ) {

      svg = d3.select("#D3line").append("svg")
                                      .attr("width", w)
                                      .attr("height", h);
   }

Or you clear all content of you element, where the SVG resides:

document.querySelector( '#D3line' ).innerHTML = '';