[Solved]-Recreate D3 Multi-Line Chart on Resize (responsive)-d3.js

The issue was with the parsing of the data every time the window was resized.

As the date within the data is parsed the first time, calling parseDate(d.date) will fail on every other call as it's already been parsed to a valid date. Do you get it?

Hence, moving the parsing code so that it's executed just once:

// parse data just once
data.forEach(function(d) {
  d.date = parseDate(d.date);
  d.value = +d.value;
});

Fiddle link: https://jsfiddle.net/a5rqt0L1/

Suggestion: I feel this isn't the right way to make a responsive chart i.e. removing SVG and re-appending to the body with all the configuration done multiple times. Here's how I'd do it:

1. Parse the data, append svg with initial height and width, append X, Y axes just once but move drawBars (to draw the actual bars) to a separate function that will use d3's own enter, exit and update selection logic.
2. On window resize, just change the SVG's height and width, re-render the axes by .call(xAxis)... and just call the drawBars function.

Hope this helps.