javascript - Aumenta y disminuye el radio de un círculo con transición d3
d3.js circle (2)
Intento crear un efecto de pulso en un círculo aumentando y disminuyendo su radio. Me gustaría que el círculo crezca y se reduzca en función de un conjunto de datos determinado. Solo puedo obtener la función de transición para aumentar o disminuir el radio pero no ambos.
d3 crea automáticamente un círculo diferente para cada valor en la matriz. ¿Cómo puedo hacerlo para que el radio de un círculo crezca y se encoja a medida que recorre el conjunto? una versión simple de lo que tengo hasta ahora está debajo. Gracias por cualquier ayuda que pueda ofrecer.
dataset = [30, 80, 150, 90, 20, 200, 180]
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var circle = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
circle
.attr("cx", 500)
.attr("cy", h/2)
.attr("r", dataset[0])
.attr("fill", "orange");
Esto no encaja realmente con el patrón general D3 data / enter / update / exit porque no está controlando múltiples elementos DOM, sino que cambia los atributos de uno solo. Sin embargo, puede hacer esto fácilmente con un ciclo que agrega las transiciones según lo especificado. El código se vería así.
dataset.forEach(function(d, i) {
circle.transition().duration(duration).delay(i * duration)
.attr("r", d);
});
Para un ejemplo completo, mira aquí .
Otra opción que crea un círculo pulsante continuo: