title: D3js path update enter and exit
body: <p>What am I missing?<br>
  I am allowing users to remove and plot their own data point.  My line path is drawn with this and it works fine.  </p>
  
  <pre><code> let self = this;
          let line = D3['line']()
              .x(function (d) { return self.getColX(d.x); })
              .y(function (d) { return self.getRowY(d.y); });
          this.group = this.canvas.append("g")
              .attr("transform", "translate(25,25)");
  
          //bind the data
          this.group.selectAll("path")
              .data(this.data[this.site].drawLine)
              .enter()
              .append("path")
              .attr("d", line)
              .attr("fill", "none")
              .attr("stroke", "black");
  
          this.group.selectAll('path').exit().remove()
  </code></pre>
  
  <p>My problem is, if I pop the last coordinates out and add a new one, call the draw function, the new points gets added correctly but the old points doesn't get remove.</p>
  
  <p>For example:  my line goes from (x,y):  (1,3) to (3,6) to (7,8), if i remove (7,8) and replace that with 5,6.  i will see a new line from (3,6) to (5,6) but the line from (3,6) to (7,8) which is no longer in the data array still there.  </p>