Dado un conjunto de puntos aleatorios en un espacio bidimensional, ¿cómo se podría animar los puntos que aparecen en la ventana? Actualmente, el código que tengo creará todos los nodos a partir del conjunto de puntos dado, y luego, después de un breve retraso, todos los nodos aparecerán a la vez, no uno por uno en orden. Encontré una manera de usar un lienzo html y algo de código D3, pero esto puede limitar mi uso de D3 a medida que avance en el proyecto.
El objetivo final es poder animar la construcción de objetos geométricos como una llave en T en la ventana usando D3. También me gustaría poder animar objetos como bordes, cuadros delimitadores y más progresivamente usando D3. La razón por la que elegí usar D3 para este proyecto es porque pensé que el proceso de animación era bastante simple y fluido, todavía espero que este sea el caso. Por favor, hágame saber la mejor manera de animar la construcción de un objeto determinado. Si puedo animar los nodos correctamente, los otros objetos deberían ser más simples.
A continuación se muestra el código actual, animará los nodos pero no uno por uno, sino que toda la animación sucede a la vez.
function drawVertexSet(s = pointSet) { d3.selectAll("g").remove(); var nodes = svg.append("g"); for (let i = 0; i < pointSet.length; i++) { var circles = nodes.append("circle") .attr("cx", pointSet[i][0]) .attr("cy", pointSet[i][1]) .attr("r", 3) .style("fill", "white") } for (let i = 0; i < pointSet.length; i++) { vertex = document.getElementsByTagName("circle")[i].id = "vertex_" + i; setTimeout(() => { d3.select("#vertex_" + i) .transition() .delay(200) .duration(1) .style("fill", "black"); }, 200); } }Aquí hay un ejemplo:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://d3js.org/d3.v7.js"></script> </head> <body> <button id="replay">Replay</button> <div id="chart"></div> <script> // set up const margin = { top: 5, bottom: 5, left: 5, right: 5 }; const width = 200 - margin.left - margin.right; const height = 200 - margin.top - margin.bottom; const svg = d3.select('#chart') .append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); // connect button d3.select('#replay') .on('click', () => drawVertexSet(getRandomData())); // random data generator function getRandomData() { const randX = d3.randomInt(0, width); const randY = d3.randomInt(0, height); const numPoints = d3.randomInt(10, 30)(); return d3.range(numPoints).map(() => [randX(), randY()]); } function drawVertexSet(pointSet) { g.selectAll('circle') .data(pointSet) .join('circle') .attr('cx', ([x, y]) => x) .attr('cy', ([x, y]) => y) .attr('r', 3) .attr('fill', 'black') // start the circle as invisible .attr('opacity', 0) .transition() // how long it takes each circle to fade in .duration(100) // how long to wait before transition the circle .delay((d, i) => i * 100) // make the circle visible .attr('opacity', 1); } drawVertexSet(getRandomData()); </script> </body> </html>