title: Remove d3.js path on resize
body: <p>I'm trying to remove a previous path on the resize of a window. You can see my attempts at the line/path removal at the end. I suspect I'm not referencing the correct element(s); I'd like to remove all the contents of the svg (axes, path) and redraw them. Currently I just get a smear of all previous paths/axes.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Test Plot Viewer&lt;/title&gt;
      &lt;script src="js/lib/d3.v4.min.js"&gt;&lt;/script&gt;
      &lt;style&gt;
        .line {
          fill: none;
          stroke: steelblue;
          stroke-width: 2px;
        }
  
        #chart {
          position: fixed;
          left: 55px;
          right: 15px;
          top: 10px;
          bottom: 55px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div id="chart"&gt;&lt;/div&gt;
  
      &lt;script&gt;
  
        var chartDiv = document.getElementById("chart");
        var svg = d3.select(chartDiv).append("svg");
  
        function render() {
  
          // Extract the width and height that was computed by CSS.
          var width = chartDiv.clientWidth;
          var height = chartDiv.clientHeight;
  
          // Use the extracted size to set the size of an SVG element.
          svg
            .attr("width", width)
            .attr("height", height);
  
          // set the dimensions and margins of the graph
          var margin = {top: 10, right: 15, bottom: 55, left: 55};
              width = width - margin.left - margin.right,
              height = height - margin.top - margin.bottom;
  
          // parse the date time
          var parseTime = d3.timeParse("%m/%d %H:%M");
  
          // set the ranges
          var x = d3.scaleTime().range([0, width]);
          var y = d3.scaleLinear().range([height, 0]);
  
          // define the line
          var valueline = d3.line()
            .x(function(d) { return x(d.time); })
            .y(function(d) { return y(d.solar); });
  
          // Get the data
          d3.csv("data_eos.csv", function(error, data) {
            if (error) throw error;
  
            // format the data
            data.forEach(function(d) {
              d.time = parseTime(d.time);
              d.solar = +d.solar;
            });
  
            // Scale the range of the data
            x.domain(d3.extent(data, function(d) { return d.time; }));
            y.domain([0, d3.max(data, function(d) { return d.solar; })]);
  
            // Add the valueline path.
            svg.append("path")
                .data([data])
                .attr("class", "line")
                .attr("d", valueline);
  
            // Add the X Axis
            svg.append("g")
              .attr("transform", "translate(0," + height + ")")
              .call(d3.axisBottom(x)
                .tickFormat(d3.timeFormat("%m/%d %H:%M  ")))
              .selectAll("text")
                .style("text-anchor", "end")
                .attr("dx", "-.8em")
                .attr("dy", ".15em")
                .attr("transform", "rotate(-45)");
  
            // Add the Y Axis
            svg.append("g")
              .call(d3.axisLeft(y));
  
          });
        }
  
  //      d3.select("svg").remove();
  //      svg.remove();
  //      d3.selectAll("g &gt; *").remove()
  //        d3.selectAll("chartDiv.path.line").remove();
  //      d3.select("path.line").remove();
        render();
  
        // Redraw based on the new size whenever the browser window is resized.
        window.addEventListener("resize", render);
  
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My feeble attempts at removing just the line are commented out near the end.</p>
  
  <p>Any Ideas? TIA.</p>