Data refresh issue with D3 burnup chart

Question

I'm building a "burnup" d3 line chart attempting to forecast trends based on scope and historic data.

A dropdown box selects the data to be displayed, ideally transitioning between lines, but I'm having troubles clearing the previous data displayed, and instead the new lines are written over the existing lines.

Link to the jsfiddle: https://jsfiddle.net/dgf1vts8/

Currently doing it this way (line 329):

svg.append("path")
      .datum(selectedData)
      .attr("class", "line")
      .attr("d", line);

other approach I've tried and did not work (line 318)

var lines = svg.selectAll(".line").data(selectedData).attr("class","line");
    lines.transition().duration(500).attr("d",line);
    lines.enter()
      .append("path")
      .attr("class","line")
      .attr("d",line);
    lines.exit()
      .remove();

Any guidance with this would be much appreciated