Kann die Farbe meiner Svg nicht schützen, wenn ich mouseover Methode verwende

Question

Ich habe einige Kreise in for Schleife erstellt und ich möchte die Farbe dieser Kreise in rot ändern, wenn Maus über sie schwebt. Aber wenn die Maus den Fokus auf diese Kreise verliert, möchte ich, dass sie die Farbe schützen, die sie hatten, bevor die Maus über ihnen schwebte. Aber da die Kreise von for-Schleife erstellt werden, bin ich nicht sicher, wie das geht.

Die Arrays sind:

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 die Zahl der Menschen mit einer Farbe zu ihnen besagt, wenn der Kunde ein Ingenieur zugeordnet ist.

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**);}); 

} 

Ich habe Internet gesucht, konnte aber kein Ergebnis erhalten. Danke im Voraus. Image: The visualization is here

Answer 1

In Ihrem Fall würde ich das .classed() Attribut

Beispiel:

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

und CSS wäre:

.fillCircle{ 
    fill: red !important; 
    } 

, wenn Sie es wie folgt verwenden , fügen Sie die Klasse bei Hover hinzu und entfernen sie bei Mouseout

Answer 2

Verwenden Sie die Hover-Pseudoklasse, dann müssen Sie sich an nichts erinnern.

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>

Beachten Sie, dass auch, wenn Sie die Füllung ein Attribut, anstatt einen Stil zu machen, dann müssen Sie nicht! Wichtig.

Answer 3

Echonax`s Antwort ist ein Arbeits ein, aber das ist einfacher: geben Sie Ihrem Element eine Klasse:

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

Und verwenden CSS:

.myCircle:hover { 
    fill: whatever; 
;