D3多折线图-多个数组，解析时间戳

Question

So I'm using d3, v4. Trying to graph multiple lines individually, by date (x) and value (y). The problem is I cannot parse the date after doing it once for the first line. What can I do differently (for the first function in particular) to make it work for both?

Here is the code pen for the entire project (where I've included multiple arrays of data, but am only in the process of graphing the first two. Sorry for the messiness. The lines below can be found starting line 314) Important pieces:

function type(data) {
   data[0].forEach(function(d) {
   d.inspected_at =  parseTime(d.inspected_at);
   console.log(d)
   return d;
   })
};

// define the line
var line1 = d3.line()
    .x(function(d) { return x(d.inspected_at); })
    .y(function(d) { return y(d.flow_data);});
var line2 = d3.line()
    .x(function(d) { return x(d.inspected_at); })
    .y(function(d) { return y(d.flow_data);});

// Add the line path(s)
//line CB-01
svg.append('g')
  .attr('clip-path', 'url(#clipper)') 
  .selectAll('path#line').data([data[0]])
  .enter().append("path") 
  .attr("class", "line")
  .attr("id", "downstreamLine")
  .attr("d", line1)
  .attr("stroke", "blue");  
  //line CB-02
svg.append('g')
  .attr('clip-path', 'url(#clipper)') 
  .selectAll('path#line').data([data[1]])
  .enter().append("path") 
  .attr("class", "line")
  // .attr("id", "downstreamLine")
  .attr("d", line2)
  .attr("stroke", "green");

Here is what my data looks like:

var data = [{"id":"CB-01","inspected_at":"2018-04-08T12:44:30.000Z","flow_data":"4"},
{"id":"CB-01","inspected_at":"2018-04-08T12:44:30.000Z","flow_data":"5"},
{"id":"CB-01","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"4"},
{"id":"CB-01","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"7"},
{"id":"CB-01","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"2"},
{"id":"CB-01","inspected_at":"2018-04-08T13:04:42.000Z","flow_data":"3"},
{"id":"CB-01","inspected_at":"2018-04-08T13:04:42.000Z","flow_data":"9"}],


[{"id":"CB-02","inspected_at":"2018-04-08T12:44:30.000Z","flow_data":"3"},
{"id":"CB-02","inspected_at":"2018-04-08T12:44:30.000Z","flow_data":"2"},
{"id":"CB-02","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"3"},
{"id":"CB-02","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"5"},
{"id":"CB-02","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"6"},
{"id":"CB-02","inspected_at":"2018-04-08T13:04:42.000Z","flow_data":"8"},
{"id":"CB-02","inspected_at":"2018-04-08T13:04:42.000Z","flow_data":"7"}]

The first array being one line, the second array is the next.

Thanks in advance! Let me know if I can provide any more info.

Answer 1

This should work for any amount of lines, iterate every line array and do the same process for each point in that line array:

function type(data) {
  data.forEach(arr => arr.forEach(d => d.inspected_at = parseTime(d.inspected_at)))
};