现在的问题是,文字放在矩形上显示不出来,上网查是需要将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;})