[Solved]-Fill same line color in to circle on Multi Line chart when mouse over and remove color from circle when mouse out-d3.js

var data = [{
  depotid: 123,
  depotname: "all depots",
  materials: [{
      materialname: "m7824 (msb0011359c) 600 mg",
      materialtypeid: 1234,
      materialstock: [{
          date: "2020-10-01",
          stock: 100
        },
        {
          date: "2020-11-01",
          stock: 200
        },
        {
          date: "2020-12-01",
          stock: 300
        },
        {
          date: "2021-01-01",
          stock: 400
        },
        {
          date: "2021-02-01",
          stock: 500
        },
        {
          date: "2021-03-01",
          stock: 600
        },
        {
          date: "2021-04-01",
          stock: 700
        },
        {
          date: "2021-05-01",
          stock: 800
        },
        {
          date: "2021-06-01",
          stock: 900
        },
        {
          date: "2021-07-01",
          stock: 1000
        },
        {
          date: "2021-08-01",
          stock: 1100
        },
        {
          date: "2021-09-01",
          stock: 1200
        },

      ]
    },
    {
      materialname: "m7824 (msb0011359c) 500 mg",
      materialid: 1232,
      materialstock: [{
          date: "2020-10-01",
          stock: 200
        },
        {
          date: "2020-11-01",
          stock: 300
        },
        {
          date: "2020-12-01",
          stock: 400
        },
        {
          date: "2021-01-01",
          stock: 500
        },
        {
          date: "2021-02-01",
          stock: 560
        },
        {
          date: "2021-03-01",
          stock: 870
        },
        {
          date: "2021-04-01",
          stock: 800
        },
        {
          date: "2021-05-01",
          stock: 900
        },
        {
          date: "2021-06-01",
          stock: 1000
        },
        {
          date: "2021-07-01",
          stock: 1100
        },
        {
          date: "2021-08-01",
          stock: 1200
        },
        {
          date: "2021-09-01",
          stock: 1300
        },

      ]
    }
  ]
}]
let width = 900,
  height = 400,
  margin = 100;

var dates = [];
for (let obj of data[0].materials[0].materialstock) {
  dates.push(obj.date);
}

var domain = d3.extent(dates);
var newstartdate = new date(domain[0]).setdate(new date(domain[0]).getdate() - 15);
var newendtdate = new date(domain[1]).setdate(new date(domain[1]).getdate() + 15);

var xscaletest = d3.scaletime()
  .domain([new date(newstartdate), new date(newendtdate)])
  .range([0, width - margin * 2]);


var yscaletest = d3.scalelinear()
  .domain([0, d3.max(data[0].materials, function(d) {
    return d3.max(d.materialstock, function(d) {
      return d.stock;
    })
  })])
  .range([height - margin, 0]);

/* add svg */
var svg = d3.select("#xyaxes").append("svg")
  .attr("width", (width + margin) + "px")
  .attr("height", (height + margin) + "px")
  .attr("style", "outline: thin solid black;")
  .append('g')
  .attr("transform", `translate(${margin}, ${margin})`);

//add line
var line = d3.line()
  .x(function(d) {
    return xscaletest(new date(d.date))
  })
  .y(function(d) {
    return yscaletest(d.stock)
  });

let lines = svg.append('g')
  .attr('class', 'lines');

var groups = lines.selectall('.line-group')
  .data(data[0].materials).enter()
  .append('g');

var colors = d3.scaleordinal((d3.schemecategory10))
  .domain(data[0].materials.map(function(d) {
    return d.materialname;
  }));

//line
groups.append("path")
  .attr("d", function(d) {
    return line(d.materialstock)
  })
  .attr("fill", "none")
  .attr("stroke", (d, i) => colors(i))
  .style("stroke-dasharray", "5,5") //dashed array for line;

//dot on line
svg.selectall("dot")
  .data(data[0].materials)
  .enter()
  .append("g")
  .attr("fill", "none")
  .style("stroke", (d) => colors(d.materialname))
  .attr("class", "dot")
  .selectall("dot")
  .data(function(d) {
    d.materialstock.foreach(function(v) {
      v.materialname = d.materialname;
    });
    return d.materialstock;
  })
  .enter().append("circle")
  .attr("class", "circle")
  .attr("r", 4)
  .attr("cx", function(d) {
    return xscaletest((new date(d.date)));
  })
  .attr("cy", function(d) {
    return yscaletest(d.stock);
  })
  .on("mouseover", function(d) {
    d3.select(this).style("fill", colors(d.materialname));
  })
  .on("mouseout", function() {
    d3.select(this).style("fill", "none");
  });

/* add axis into svg */
var xaxis = d3.axisbottom(xscaletest)
  .ticks(d3.timemonth.every(1))
  .ticksizeouter(0)
  .ticksizeinner(-height + margin)
  .tickformat(d3.timeformat("%b -%y"));

var yaxis = d3.axisleft(yscaletest)
  .ticks(12)
  .ticksize(-width + margin + 100)

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", `translate(0, ${height-margin})`)
  .call(xaxis)
  .call(g => g.selectall(".tick:first-of-type line")
    .attr("class", "axis_bar")
    .attr("stroke", "#bebebe"))
  .call(g => g.selectall(".tick:not(:first-of-type) line")
    .attr("class", "axis_y_tick")
    .attr("stroke", "#e8e8e8"));


svg.append("g")
  .attr("class", "y axis")
  .call(yaxis)
  .call(g => g.selectall(".tick:first-of-type line")
    .attr("class", "axis_bar")
    .attr("stroke", "black"))
  .call(g => g.selectall(".tick:not(:first-of-type) line")
    .attr("class", "axis_y_tick")
    .attr("stroke", "#e8e8e8"));

svg {
  font-family: sans-serif, arial;
}

.line {
  stroke-width: 2;
  fill: none;
}

.text {
  font-size: 12px;
}

text.title {
  font-family: arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;
  color: #353535;
  ;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="xyaxes"></div>