Draw Multiple Lines In Line Chart Dynamically

I am trying to create a multi-line chart upon this example, and need to draw multiple lines dynamically based on user selections. The code uses following approach to create the lin

Solution 1:

Yes, you should not creating duplicates. Note that valueline from your example is function which accepts data and generates line path (this function is also called line generator in API). You can create a function which will return a different function (line generator) per each of your data columns:

    // Define the parametric line generator
    var valueline = function(field) { 
      return d3.svg.line()
        .x(function(d) {
        return x(d.date);
      })
        .y(function(d) {
        return y(d[field]);
      });
    };
  ...

      for (let field of ["primary", "secondary"])
      {
        // Add the valueline path.
        svg.append("path")
          .attr("class", "line") 
          // here you constructing specific line generator and pass data to it  
          .attr("d", valueline(field)(data)); 
      }

Working example here: https://jsfiddle.net/sdnyn8uf/18/ (sorry, no hoverable points there for the second segment)