Question

我的问题是如何在换行后将一个节点中的多个元素居中。我正在利用这里给出的关于自动换行的代码示例：http://bl.ocks.org/mbostock/7555321来创建多个tspan对象。

创建/绘制所有tspan对象后，我定义了X和Y的位置。首先，我得到整个tspan的文本区域并在其周围创建一个框：

var tspanbbox = d3.select(this).select("tspan").node().getBBox();
var node_bbox = {"height": tspanbbox.height+5, "width": tspanbbox.width+5}; 
var rect = d3.select(this).select('rect');
rect.attr("x", -node_bbox.width/2).attr("y", -node_bbox.height/2)
rect.attr("width", node_bbox.width).attr("height", node_bbox.height+10);

然后我添加了tspan的属性，即rect中的文本。

tspan.attr("x", -node_bbox.x).attr("y", -node_bbox.y);

此代码正确地在文本周围区域打印一个框，但文本溢出。

http://imgur.com/zxiRmxR

所以我要做的是将组作为一个实体而不是第一个tspan（我假设是GO术语之后的第一行）。如果我尝试更改tspan属性（如上面的代码所示），则只有一个tspan对象移动。如果我使用selectAll("tspan")对所有这些进行，所有这些tspans都被分组在同一个y轴上。

有没有办法妥善解决这个问题？

Answer 1

如果有其他人遇到此问题，您可以检查总输入的行数，并根据实现的行数对y属性进行调整（因此它有点手动和过时，但它有效）。

以多行换行为中心

1 个答案: