居中多行换行答案

【问题标题】：Centering multiple line wrapping居中多行换行
【发布时间】：2015-09-12 14:00:30
【问题描述】：

我的问题是关于如何在换行后将多个元素集中在一个节点中。我正在使用此处给出的关于自动换行的代码示例：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") 对它们进行处理，所有这些 tspan 都将分组在同一个 y 轴上。

有什么方法可以正确解决这个问题吗？

【问题讨论】：

我也对此感兴趣。在我的项目中，我像您一样使用居中的多个文本。但我目前没有背景框。也许可以分享你是如何做那个盒子或使用上面的代码的？我按照罗伯特所说的方式尝试过，但它只是带有错误：stackoverflow.com/questions/17218108/…
@kwoxer 所以实际上我找到了解决问题的方法。如果您正在尝试解决该问题，以供将来参考，您可以检查输入的总行数，并根据实现的行数对 y 属性进行调整（因此它有点手动和过时，但它有效）。我对 d3.js/只修改别人的代码很新，所以我不知道我是否可以回答你的问题，但是创建 rect 完成的大部分工作都是在上面实现的代码上完成的（没有附加 css矩形）。您有什么具体问题？

标签： svg d3.js

【解决方案1】：

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

【讨论】：