Update d3 graph with new data

Question

I am trying to update a d3 graph when I click on a County on a map. Instead of updating the existing chart, a new graph is created each time. Any ideas of how to rectify this? Code is here: https://github.com/careyshan/d3-graphUpgade Thanks

This is the part of the code that I am having difficulty with:

on("click", function(d,i){

              if(document.getElementById('linechart').childNodes===null){
                console.log("Working")
                dataNew = data.filter(function( obj ) {
                  return obj.County == d.properties.NAME_TAG;
                    console.log(data);
                });

                dataNew.sort(function(a,b){
                // Turn your strings into dates, and then subtract them
                // to get a value that is either negative, positive, or zero.
                return b.date - a.date;
                });
                for (var i=1; i<dataNew.length;i++){
                dataSel.push(dataNew[i]);
                }
          }else if(document.getElementById('linechart').childNodes!=null){
                //console.log("check")
                dataNew = data.filter(function( obj ) {
                  return obj.County == d.properties.NAME_TAG;
                });

                dataNew.sort(function(a,b){
                // Turn your strings into dates, and then subtract them
                // to get a value that is either negative, positive, or zero.
                return b.date - a.date;
                });
                for (var i=1; i<dataNew.length;i++){
                dataSel.push(dataNew[i]);
                }
              }
              linechart(dataNew);
              console.log(dataNew);
          });

Answer 1

A new graph is created each time because on every call to the function linechart() you are appending a new graph (an svg element) to the body of the page.

This is the snippet from your code which appends a new graph each time.

  // 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
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("id","linechart")
      .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

If you want to update the same chart, just modify your linechart() function to refer to the same svg element. You can achieve this by declaring a global variable for the svg element and use it in your linechart() method like below:

  // If graph is not there, create it
  if(!svg) {
      // append the svg object to the body of the page
      //appends a 'group' element to 'svg'
      // moves the 'group' element to the top left margin
      svg= d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("id","linechart")
          .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");
  }

Note: Declare the svg as a global variable (may be at the starting of the script tag):

var svg;