score:1

Accepted answer

Here's how I'd do it:

1 Append all g elements outside the update function and give them a class name so you can reference them, for example:

svg.append("g")
  .attr("class","axis axis--y")

2 Select an empty class and append the line and circles new data through enter(), Example:

var line = svg.selectAll(".lineTest")
  .data([data],function(d){ return d.ser1 });

line = line
  .enter()
.append("path")
  .attr("class","lineTest")
  .merge(line);

line.transition()
  .duration(durations)
  .attr("d", valueline)

3 Toggle the dataset:

data = d3.select('#selection')
      .property('value') == "First" ? data_set : data_set2

Here's a modified version of your code: Plunker


Related Query