d3 rect加text显示问题，如何让rect和text并列？

Question

现在的问题是，文字放在矩形上显示不出来，上网查是需要将rect和text并列，怎么写呢？

<g>
    <rect x="130.9090909090909" y="280" width="130.9090909090909" height="60" fill="#FFFFFF" opacity="0.5" stroke="#202020">
        <text x="10" y="10" font-size="1em" dy="8">十月革命</text>
    </rect>
</g>

d3代码

const event = g.append('g').attr('id', 'event');
                //矩形
                event.append('g').selectAll('.event_buttom').data(dataevent).join('g')
                .append('rect')
                .attr('x', d => xScale(d.starttime))
                .attr('y', innerHeight-60)
                .attr('width', d => xScale(d.endtime)-xScale(d.starttime))
                .attr('height', 60)
                .attr('fill', '#FFFFFF').attr('opacity', 0.5)
                .attr('stroke', '#202020')
                //鼠标悬置每个矩形
                .each(function(d) { d.rect = this; })
                .on('mouseover', overed_event)
                .on('mouseout', outed_event)
                
                //文字
                .append('text')
                .attr('x', 10)
                .attr('y', 10)
                .attr('font-size', '1em')
                .attr('dy', 8)
                //.attr('text-anchor', 'middle')
                .text(function(d){return d.name;})