D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mobbjelly
Full window
Github gist
.call()
<!DOCTYPE html> <meta charset="utf-8"> <head> <title>Selection .each</title> </head> <style> body { font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; color: #333; } circle { fill: orange; } g.item text { fill: #ddd; font-size: 70px; text-anchor: middle; font-weight: bold; } </style> <body> <svg width="760" height="140"> <g transform="translate(70, 70)"> <g class="item" transform="translate(0, 0)"></g> <g class="item" transform="translate(120, 0)"></g> <g class="item" transform="translate(240, 0)"></g> </g> </svg> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script> <script> function addNumberedCircle(selection) { selection .append('circle') .attr('r', 40); selection .append('text') .text(function(d, i) { return i + 1; }) .attr('y', 50) .attr('x', 30); } d3.selectAll('g.item') .call(addNumberedCircle); </script> </body> </html>
https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js