ちなみに、このような g 要素を D3.js で生成する場合のコードは次のような感じになります。
複数の g 要素を参照する D3 セレクションオブジェクトを変数化して使いまわすところがポイントです(下記の例では nodes 変数)。
D3.js で g 要素の transform 処理
<svgid="svg-hsae2we"w="200"height="80"></svg><script>constsvg=d3.select('#svg-hsae2we');constnodesData=[{label:'AAA',x:20,y:20},{label:'BBB',x:40,y:40},{label:'CCC',x:60,y:60}];// ノードを描画するための g 要素をノードデータの数だけ作成
constnodes=svg.selectAll('g').data(nodesData).join('g');// 各 g 要素に circle 要素を追加
nodes.append('circle').attr('cx',0).attr('cy',0).attr('r',10).attr('fill','red');// 各 g 要素に text 要素を追加
nodes.append('text').attr('x',15).attr('y',2).attr('dominant-baseline','middle').attr('font-size',20).attr('font-weight','800').attr('fill','blue').text((d)=>d.label);// 各 g 要素の transform 属性を設定
nodes.attr('transform',(d)=>`translate(${d.x}${d.y})`);</script>
次の例では、2 つの g 要素(layer1 と layer2)を作成し、その子要素として circle や rect 要素を配置しています。
layer1、layer2 の順番で g 要素を追加しているので、layer2 に配置した子要素(この場合は circle)の方が、手前に表示されることが保証されます。