我正在使用d3绘制UML图,并希望将文本包装在用d3绘制的形状中.我已经得到了下面的代码,并找不到解决方案,使文本"适合"我的形状(见下图).
var svg = d3.select('#svg')
.append('svg')
.attr('width', 500)
.attr('height', 200);
var global = svg.append('g');
global.append('circle')
.attr('cx', 150)
.attr('cy', 100)
.attr('r', 50);
global.append('text')
.attr('x', 150)
.attr('y', 100)
.attr('height', 'auto')
.attr('text-anchor', 'middle')
.text('Text meant to fit within circle')
.attr('fill', 'red');
SVG不提供文本换行,但使用foreignObject
你可以达到类似的效果.假设这radius
是圆的半径,我们可以计算适合圆内的框的尺寸:
var side = 2 * radius * Math.cos(Math.PI / 4), dx = radius - side / 2; var g = svg.append('g') .attr('transform', 'translate(' + [dx, dx] + ')'); g.append("foreignObject") .attr("width", side) .attr("height", side) .append("xhtml:body") .html("Lorem ipsum dolor sit amet, ...");
小组应该少量移位以使文本居中.我知道这不是所要求的,但它可能会有所帮助.我写了一个小小提琴.结果将如下所示: