d3 rect加text显示问题,如何让rect和text并列?

现在的问题是,文字放在矩形上显示不出来,上网查是需要将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;})
阅读 1.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进