D3 multiline chart on update crosses axis

Question

I am trying to plot a multiline d3 chart. I have created a method which should take a new dataset and try to plot it in the same d3 frame for new data update changes (possibly filters).

1. The first draw works fine but the next draw (mocked data: which is a slice of the previous data and few manipulated values) is not showing correct is crossing the x axis.

   [See Image below]

2. Also the starting origin is missing a tick which should also be 2010 in this example

3. I also want to create few more lines if there is more datapoints in the future which should be dynamic. Current model is {date, actual, projected}, More expected is mean or difference which will only be shown on trigger.

Any help would be appreciated.

Here is a Stackblitz https://stackblitz.com/edit/angular-rhr39p

References:

1. Animated line chart: http://bl.ocks.org/atmccann/8966400
2. Multiline chart: https://bl.ocks.org/larsenmtl/e3b8b7c2ca4787f77d78f58d41c3da91
3. Dataset updates: https://bl.ocks.org/d3noob/7030f35b72de721622b8

---

Answer 1

Please keep just one problem per question here at Stack Overflow. This answer will deal with problem #1, consider asking separate questions for the other problems.

The issue here is just your enter/update methodology, that is not correct and. Stick with the idiomatic D3, which is along these lines:

const update =  this.svg.selectAll('.records')
    .data(records);

const enter = update.enter().append('g')
    .attr('class', 'records'); 

Then, you append new paths using enter and update those paths using update .

You can also ditch the groups and create enter/update/exit selections for the paths directly. That will make your code simpler.

Here is the forked code: https://stackblitz.com/edit/angular-lyd79t?file=src%2Fapp%2Flinechart%2Flinechart.component.ts