Невозможно защитить цвет моего SVG при использовании метода наведения курсора

Question

У меня есть несколько кругов, созданных для цикла, и я хочу изменить цвет этих кругов на красный, когда на них нависнет мышь. Но когда мышь теряет фокус на этих кругах, я хочу, чтобы они защищали цвет, который у них был, прежде чем мышка навис над ними. Но поскольку круги созданы для цикла, я не уверен, как это сделать.

Массивы являются:

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 массив число людей с цветом, назначенным им о том, если клиент является инженером.

for (i = 0; i < 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 THE COLOR IT HAD**);}); 

} 

Я искал интернет, но не смог получить результат. Заранее спасибо. Изображение: The visualization is here

Answer 1

В вашем случае я бы использовать атрибут .classed()

Пример:

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

и ваш CSS будет:

.fillCircle{ 
    fill: red !important; 
    } 

если вы используете его, как это , вы добавите класс при наведении и удалите его на выводе

Answer 2

Используйте псевдо-класс hover, тогда вам не нужно ничего запоминать.

svg = d3.select("svg"); 
 

 
for (i = 0; i < 2 ; i++) { 
 

 
    var circle = svg.append("circle") 
 

 
    .attr("cx", 50 + i * 50) 
 

 
    .attr("cy", 50) 
 

 
    .attr("r", 20) 
 

 
    .attr("fill", "blue"); 
 
}

circle:hover { 
 
    fill: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg width="100%" height="100%"></svg>

Заметим также, что если вы сделаете заливку атрибут, а не стиль, то вам не нужно! Важно.

Answer 3

Echonax`s ответ рабочий один, но это проще: дать вашему элементу класс:

circle.attr("class", "myCircle") 

И использовать CSS:

.myCircle:hover { 
    fill: whatever; 
;