鍍金池/ 問(wèn)答/HTML/ d3，svg中如何讓rect上顯示文字

d3，svg中如何讓rect上顯示文字

我在查資料的時(shí)候發(fā)現(xiàn)要在rect外包裹一層g才能顯示text的文本內(nèi)容

<g>
    <rect>
        <text></text>
    </rect>
</g>

我在使用d3時(shí)

var svg = d3.select('body').append('svg').attr('width',400).attr('height',500)
var g = svg.append('g')
var rect = g.append('rect').attr('width',40).attr('height',40)
var text = rect.append('text').text('wa').attr('fill','white')

控制臺(tái)結(jié)構(gòu)和上面一樣但是為什么還是不能顯示出text的內(nèi)容呢。。。

回答
編輯回答
硬扛
var svg = d3.select('body').append('svg').attr('width',400).attr('height',500)
var g = svg.append('g')
var rect = g.append('rect').attr('width',40).attr('height',40)
var text = g.append('text').text('wa').attr('fill','white')
  .attr('x', 20)
  .attr('y', 20)
  .attr('text-anchor', 'middle')
  .style('font-size', '20px')
  .attr('dy', 8)

感覺(jué)你寫的方式不怎么可靠，你可以在rect下面添加一個(gè)text元素，然后給text元素的x和y屬性一定的值把文本定位到rect里面。

2018年1月8日 00:13