d3.jsでSVGグループ内に2つの要素を出力する方法

Question

g要素内に2つの要素を出力したい。

下記のコードを書いたのですが、

this.d3_svg = d3.select(this.elem_div)
.append('svg')
.attr('width', '100%')
.attr('height', '100%')
.attr('transform','translate(10, 50)');

this.d3_svg.selectAll('g')
.data(this.item)
.enter()
.append('g')
.append('rect')
/* g 要素を選択したい */
.append('text')
.text(function(d) { return d; })
;

出力されたSVGは

<svg width="100%" height="100%" transform="translate(10, 50)">
<g>
<rect>
<text></text>
</rect>
</g>

出力したいSVGは

<svg width="100%" height="100%" transform="translate(10, 50)">
<g>
<rect></rect>
<text></text>
</g>

どうするのが良いのでしょうか？

Answer 1

let d3_g = this.d3_svg.selectAll('g')
 .data(this.item)
 .enter()
 .append('g');

d3_g.append('rect')

d3_g.append('text').text(function(d) { return d; });

変数に代入するとできました。