title: How do you clear an SVG in d3.js in javascript
body: <p>I just created my first test program in d3.js.  It works ok so far.  It creates rects to illustrate data it reads from a .csv file and it loads a new dataset if the user picks different data.   But it writes it on top of what is already there,</p>
  
  <p>This code snippet writes new graphs without clearing what is already there</p>
  
  <pre><code>    barsM = svg.selectAll(".bar").data(dataMale).enter();
  
  
      barsF = svg.selectAll(".bar").data(dataFemale).enter()
  
  
      barsM.append("rect")
          .attr("class", "bar1")
          .attr("x", function (d) { return x(d.age_group); })
          .attr("width", x.rangeBand() / 2)
          .attr("y", function (d) { return y(d.mean * 100); })
          .attr("height", function (d, i, j) { return height - y(d.mean *100); });
  
      barsF.append("rect")
          .attr("class", "bar2")
          .attr("x", function (d) { return x(d.age_group) + x.rangeBand() / 2; })
          .attr("width", x.rangeBand() / 2)
          .attr("y", function (d) { return y(d.mean * 100); })
          .attr("height", function (d, i, j) { return height - y(d.mean * 100); });
  </code></pre>
  
  <p>You can see the program in action here</p>
  
  <p><a href="http://www.gelsana.com/IHME/blog/" rel="nofollow noreferrer">http://www.gelsana.com/IHME/blog/</a></p>
  
  <p>How do I clear out the graphs?  I do not understand the code for using datum instead of data.  </p>
  
  <p>I would assume that this would work</p>
  
  <pre><code>svg.selectAll(".bar").data(data).exit().remove();
  
  barsM = svg.selectAll(".bar").data(dataMale).enter();
  barsF = svg.selectAll(".bar").data(dataFemale).enter();
  </code></pre>
  
  <p>or this</p>
  
  <pre><code>svg.selectAll(".bar").data(dataMale).exit().remove();                       
  svg.selectAll(".bar").data(dataFemale).exit().remove();
  
  barsM = svg.selectAll(".bar").data(dataMale).enter();
  barsF = svg.selectAll(".bar").data(dataFemale).enter();
  </code></pre>
  
  <p>I would think that if there is an append,there would be a remove.  But staring at this code and pondering how to put the right code before this block did not yield any results</p>
  
  <pre><code> barsM.append("rect")
      .attr("class", "bar1")
      .attr("x", function (d) { return x(d.age_group); })
      .attr("width", x.rangeBand() / 2)
      .attr("y", function (d) { return y(d.mean * 100); })
      .attr("height", function (d, i, j) { return height - y(d.mean *100); });
  
  barsF.append("rect")
      .attr("class", "bar2")
      .attr("x", function (d) { return x(d.age_group) + x.rangeBand() / 2; })
      .attr("width", x.rangeBand() / 2)
      .attr("y", function (d) { return y(d.mean * 100); })
      .attr("height", function (d, i, j) { return height - y(d.mean * 100); });
  </code></pre>
  
  <p>When I tried this</p>
  
  <pre><code>svg.selectAll("*").remove();
  </code></pre>
  
  <p>It removed the SVG and it did  not come back.   I assume this is because I set the margins and size of the thing in the javascript and so using this trick would involve rewriting and moving the code I have all around.</p>
  
  <p>Here is the entire javascript file.  Please tell me what to change to make this work.   The code snippits and the refresh button content to clearing out the svg is not working.</p>
  
  <pre><code>var margin = {top: 20, right: 50, bottom: 100, left: 75},
      width = 740 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
  
  var x = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);
  
  var y = d3.scale.linear().domain([300, 1100]).range([height, 0]);
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");
  
  var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
  
  var svg = d3.select("#chart-svg").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("class", "graph")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  var _location = "USA";
  var _year = "1990";
  var _metric = "obese";
  
  function loadCountry(inputcountry)
  {
      //d3.selectAll("svg &gt; *").remove();
      _location = inputcountry;
      load();
  }
  
  function loadYear(inputyear)
  {
      //d3.selectAll("svg &gt; *").remove();
      _year = inputyear;
      load();
  }
  
  function loadMetric(inputmetrice)
  {
  
      _metric = inputmetrice;
      load();
  }
  
  var headers = [ "Male", "Female"];
  
  function load() {
  
      d3.csv("../database/IHME_GBD_2013_OBESITY_PREVALENCE_1990_2013_Y2014M10D08.CSV", type, function (error, data)
  
      {
          var dataMale = data.filter(function (d) {
                   return (d.location == _location) &amp;&amp;
                          (d.year == _year) &amp;&amp;
                          (d.metric == _metric) &amp;&amp;
                          (d.sex_id == 1)
                       });
  
          var dataFemale = data.filter(function (d) {
                    return (d.location == _location) &amp;&amp;
                         (d.year == _year) &amp;&amp;
                         (d.metric == _metric) &amp;&amp;
                         (d.sex_id == 2)
                        });
  
  
          x.domain(data.map(function (d) { return d.age_group; }));
          y.domain([0, d3.max(data, function (d) { return d.mean * 100; })]);
  
          svg.append("g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + height + ")")
              .call(xAxis)
                      .selectAll("text")
                          .style("text-anchor", "end")
                          .attr("dx", "-.16em")
                          .attr("dy", ".15em")
                          .attr("transform", function(d) {
                              return "rotate(-65)"
                  });
  
          svg.append("g")
              .attr("class", "y axis axisLeft")
              .attr("transform", "translate(0,0)")
              .call(yAxisLeft)
            .append("text")
              .attr("y", 6)
              .attr("dy", "-2em")
              .style("text-anchor", "end")
              .text("Mean");
  
          svg.selectAll(".bar").data(data).exit().remove();
  
  
          barsM = svg.selectAll(".bar").data(dataMale).enter();
          barsF = svg.selectAll(".bar").data(dataFemale).enter();
  
          barsM.append("rect")
              .attr("class", "bar1")
              .attr("x", function (d) { return x(d.age_group); })
              .attr("width", x.rangeBand() / 2)
              .attr("y", function (d) { return y(d.mean * 100); })
              .attr("height", function (d, i, j) { return height - y(d.mean *100); });
  
          barsF.append("rect")
              .attr("class", "bar2")
              .attr("x", function (d) { return x(d.age_group) + x.rangeBand() / 2; })
              .attr("width", x.rangeBand() / 2)
              .attr("y", function (d) { return y(d.mean * 100); })
              .attr("height", function (d, i, j) { return height - y(d.mean * 100); });
  
  
  
          var color = d3.scale.ordinal()
              .domain([0, 1])
              .range(["#ff0000", "#0000ff"]);
  
          var legend = svg.selectAll(".legend")
              .data(headers.slice().reverse())
                  .enter().append("g")
                  .attr("class", "legend")
                  .attr("transform", function (d, i) { return "translate(-20," + i * 20 + ")"; });
  
          legend.append("rect")
              .attr("x", width - 18)
              .attr("width", 18)
              .attr("height", 18)
              .style("fill", color);
  
          legend.append("text")
                .attr("x", width - 24)
                .attr("y", 9)
                .attr("dy", ".35em")
                .style("text-anchor", "end")
                .text(function (d) { return d; });
  
  
          var tooltip = svg.append("g")
              .attr("class", "tooltip");
  
          tooltip.append("rect")
              .attr("width", 30)
              .attr("height", 20)
              .attr("fill", "red")
              .style("opacity", 0.5);
  
          tooltip.append("text")
              .attr("x", 15)
              .attr("dy", "1.2em")
              .style("text-anchor", "middle")
              .attr("font-size", "12px")
              .attr("font-weight", "bold");
      });
  
      function type(d) {
          d.mean = +d.mean;
          return d;
      }
  }
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>I tried a solution offered here and it did not work</p>
  
  <p>Here is the url</p>
  
  <p><a href="http://www.gelsana.com/IHME/echonax/" rel="nofollow noreferrer">http://www.gelsana.com/IHME/echonax/</a></p>
  
  <p>The HTML</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="stylefile.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script type="text/javascript" src="http://d3js.org/d3.v2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="thejsfile.js"&gt;&lt;/script&gt;
  &lt;svg id="graphContainer" class="graphContainer"&gt;
    &lt;circle r="10" cx="50" cy="50" &gt;&lt;/circle&gt;
  &lt;/svg&gt;
  
  &lt;button&gt;
  remove svg contents
  &lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the javascript file</p>
  
  <pre><code>var svg = d3.select('svg');
  var btn = d3.select('button');
  
  
  btn.on('click', ()=&gt;{
      svg.selectAll("*").remove();
  });
  </code></pre>
  
  <p>and here is the css file</p>
  
  <pre><code>svg{
    height:500px;
    width:500px;
    background: gray;
  }
  path.link {
      fill: none;
      stroke: #666;
      stroke-width: 1.5px;
  }   
  
  circle {
      fill: #ccc;
      stroke: #333;
      stroke-width: 1.5px;
  }
  
  text {
      font: 10px sans-serif;
      pointer-events: none;
  }
  
  text.shadow {
      stroke: #fff;
      stroke-width: 3px;
      stroke-opacity: .8;
  }
  
  body {
      background-color: white;
      margin: 0px;
  }
  
  .graphContainer {
      text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
  }
  </code></pre>
  
  <p>When I loaded this on the internet and clicked the button, it did not do anything.</p>
  
  <p>I think my next step will try to find this example code you talk of that used this update cycle.  As PatelGatnan said, I think I am missing the Enter and Exit parts</p>
  
  <p><a href="https://i.stack.imgur.com/hqt4p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hqt4p.png" alt="enter image description here"></a></p>
  
  <p>These additions did nothing.  The program still does not refresh after a new selection.</p>