javascript - Cannot protect the color of my svg when using mouseover method -

i have circles created in loop , want change color of these circles red when mouse hovers on them. but when mouse loses focus on these circles, want them protect color had before mouse hovered on them. since circles created loop, not sure how that.

the arrays :

analyzedunique = [34675791162, 10132910658, 10588895486, 10609894726, 14794759174, 1790587656, 18895624430, 3610288229, 4170058208, 5550074705, 7600064469]  [1790587656: "blue", 3610288229: "orange", 4170058208: "blue", 34675091162: "blue", 10132910658: "orange", 10588895486: "orange", 10609894726: "orange", 14794759174: "blue"…] 

checkcustomer array numbers of people color assigned them stating if customer engineer.

for (i = 0; < numberofcirclesshown - 2 ; i++) {     var circle  = svg.append("circle")    .attr("cx", circler + r - r * cosdegrees(alpha * (i+1)))    .attr("cy", firstcircley - r * sindegrees(alpha * (i+1)))    .attr("r", circler)    .style("fill", checkcustomer[analyzedunique[i+2]]);    circle.on("mouseover", function(){d3.select(this).style("fill", "red");})    .on("mouseout", function(){d3.select(this).style("fill", **must protect color had**);});  } 

i have searched internet not result. in advance. image : the visualization here

in case i'd use .classed() attribute

example:

circle     .on("mouseover", function(){d3.select(this).classed("fillcircle", true);})     .on("mouseout", function(){d3.select(this).classed("fillcircle", false);}); 

and css be:

.fillcircle{     fill: red !important;   } 

if use this, add class on hover , remove on mouseout