D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
xidag
Full window
Github gist
general update parttern
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>general update pattern</title> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0 px; } </style> </head> <body> <svg width='960' height='500'> <circle cx='161', cy='160', r='150', fill='rgba(255, 0, 0, 0.5)'></circle> </svg> <script> function render(data){ const rects = d3.select('svg') .selectAll('.p') //class: .x .data(data); rects .exit() .remove(); rects .enter() .append('rect') .attr('class', 'p') .attr('y', 100) .attr('width', 70) .attr('height', 300) .attr('fill', 'green') .merge(rects) .attr('x', function(d){ return d; }); } render([50, 108]); //Enter render([98, 200]); //Enter + Updata //render([]); //Exit </script> </body>
https://d3js.org/d3.v4.min.js