[Solved]-d3js - How to update an existing svg path in a simple d3 line chart with new data flowing through?-d3.js

var data_set = [{
    'date': '2009-03-23',
    'raw': 25,
    'raw2': 25,
    'asset': 'a'
  },
  {
    'date': '2009-03-24',
    'raw': 28,
    'raw2': 25.4,
    'asset': 'a'
  },
  {
    'date': '2009-03-25',
    'raw': 26,
    'raw2': 25.37,
    'asset': 'a'
  },
  {
    'date': '2009-03-26',
    'raw': 22,
    'raw2': 25.03,
    'asset': 'a'
  },
  {
    'date': '2009-03-27',
    'raw': 19,
    'raw2': 24.42,
    'asset': 'a'
  },
  {
    'date': '2009-03-28',
    'raw': 23,
    'raw2': 24.28,
    'asset': 'a'
  }
]


var margin = {
  top: 30,
  right: 50,
  bottom: 30,
  left: 50
};
var svgwidth = 600;
var svgheight = 1000;
var graphwidth = svgwidth - margin.left - margin.right;
var graphheight = svgheight - margin.top - margin.bottom;
// var parsedate = d3.timeparse("%d/%m/%y");
var parsedate = d3.timeparse("%y-%m-%d");

var x = d3.scaletime().range([0, graphwidth]);
var y = d3.scalelinear().range([graphheight, 0]);
var z = d3.scaleordinal(d3.schemecategory10); // for colours
var xaxis = d3.axisbottom().scale(x).ticks(10);
var yaxis = d3.axisleft().scale(y).ticks(10);

// need to create the lines manually for each bit of data
var line = d3.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.y);
  });

// creates the svg area within the div on the dom 
// just doing this once 
var svg = d3.select("#graphdiv")
  .append("svg")
  .attr("width", svgwidth)
  .attr("height", svgheight)
var g = svg.append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")")
  .call(d3.zoom().on("zoom", function() {
    svg.attr("transform", d3.event.transform)
  }));

// add the x axis
g.append("g").attr("class", "x axis")
  .attr("transform", "translate(0," + graphheight + ")")
  .call(xaxis);
// text label for x axis 
g.append("text")
  .style("text-anchor", "middle")
  .text("timeseries dates")
  .attr("transform", "translate(" + (graphwidth / 2) + " ," + (graphheight + margin.top) + ")");

// add the y axis
g.append("g")
  .attr("class", "y axis")
  .call(yaxis);
// text label for the y axis
g.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 0 - margin.left)
  .attr("x", 0 - (graphheight / 2))
  .attr("dy", "1em")
  .style("text-anchor", "middle")
  .text("price points");


function drawgraph(data_set) {

  let pathdata = []
  //assume 2 paths
  pathdata.push([])
  pathdata.push([])

  // pass in the data here 
  data_set.foreach(function(d) {

    let path0 = {}
    let path1 = {}

    path0.date = parsedate(d.date)
    path1.date = parsedate(d.date)

    path0.y = +d.raw
    path1.y = +d.raw2

    pathdata[0].push(path0)
    pathdata[1].push(path1)

  });

  x.domain(d3.extent(data_set, function(d) {
    return parsedate(d.date);
  }));

  y.domain([
    d3.min(data_set, function(d) {
      return math.min(d.raw, d.raw2)
    }),
    d3.max(data_set, function(d) {
      return math.max(d.raw, d.raw2)
    })
  ]);

  var lines = g.selectall(".path")
    .data(pathdata)

  lines.exit().remove()

  var enter = lines.enter()
    .append("path")
    .attr("class", "path")
    .style("stroke", (d, i) => z(i))

  var merge = enter.merge(lines)
    .attr("d", line)



}
// display initial chart
window.onload = drawgraph(data_set)
// push new data every 5 seconds for a specific date
var h = setinterval(function() {
  data_set.push({
    'date': '2009-03-29',
    'raw': math.floor(math.random() * 50),
    'raw2': math.floor(math.random() * 25),
    'asset': 'a'
  }, {
    'date': '2009-03-30',
    'raw': math.floor(math.random() * 50),
    'raw2': math.floor(math.random() * 25),
    'asset': 'a'
  }, {
    'date': '2009-03-31',
    'raw': math.floor(math.random() * 50),
    'raw2': math.floor(math.random() * 25),
    'asset': 'a'
  }, {
    'date': '2009-04-01',
    'raw': math.floor(math.random() * 50),
    'raw2': math.floor(math.random() * 25),
    'asset': 'a'
  }, {
    'date': '2009-04-02',
    'raw': math.floor(math.random() * 50),
    'raw2': math.floor(math.random() * 25),
    'asset': 'a'
  }, {
    'date': '2009-04-03',
    'raw': math.floor(math.random() * 50),
    'raw2': math.floor(math.random() * 25),
    'asset': 'a'
  });
  drawgraph(data_set);
  clearinterval(h); //doing this so that it doesnt spam - if i uncomment this, it will keep spamming new lines
}, 5000); >

body {
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

path {
  fill: none;
  stroke: black
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="graphdiv"></div>