Tengo algunos círculos creados para for loop y quiero cambiar el color de estos círculos a rojo cuando el mouse pasa sobre ellos. Pero cuando el mouse pierde el foco en estos círculos, quiero que protejan el color que tenían antes de pasar el mouse sobre ellos. Pero dado que los círculos son creados por for loop, no estoy seguro de cómo hacerlo. ese.

Las matrices son:

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"…]

La matriz checkCustomer es el número de personas con un color asignado que indica si el cliente es un ingeniero.

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

}

He buscado en internet pero no pude obtener un resultado. Gracias por adelantado. Imagen: La visualización está aquí

1
Aydin Özcan 9 may. 2016 a las 10:36

3 respuestas

La mejor respuesta

En su caso, usaría el atributo .classed()

Ejemplo:

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

Y tu css sería:

.fillCircle{
    fill: red !important;
  }

Si lo usa así, agregará la clase al pasar el mouse y la eliminará al pasar el mouse

3
eko 9 may. 2016 a las 07:44

Use la pseudo clase hover, entonces no necesita recordar nada.

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>

Tenga en cuenta también que si hace que el relleno sea un atributo en lugar de un estilo, ¡entonces no necesita! Importante.

2
Robert Longson 9 may. 2016 a las 08:50

La respuesta de Echonax es funcional, pero esto es más simple: dale una clase a tu elemento:

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

Y usa CSS:

.myCircle:hover {
    fill: whatever;
;
1
Gerardo Furtado 9 may. 2016 a las 08:47