xxxxxxxxxx<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