如何在 d3 的 rect 元素中居中文本？

Posted 2023-02-22

【中文标题】如何在 d3 的 rect 元素中居中文本？

【英文标题】：How to center text in a rect element in d3?

【发布时间】：2013-05-13 06:49:30

【问题描述】：

我创建了一个 d3 可视化，它采用一组数据，为每个数据点创建一个矩形，然后在矩形中显示文本。但是，我只是通过给它坐标来让文本显示在矩形内。我想知道如何告诉它以 rect 元素为中心。代码如下：

var elementTags = ["Google", "Amazon", "Wikipedia", "Yahoo!", "Messi", "Ronaldo", "One", "Two", "Three",
             "Monkey"];

下一部分创建我用来定位矩形的数组

            var xPosLoop = [0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3];
            var yPosLoop = [0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5]

设置它们的宽度和高度

            var elementWidth = 210;
            var elementHeight = 60;

创建 svg 容器并添加矩形

            var svgContainer = d3.select("body") //create container
                    .append("svg")
                    .attr("width", 1000)
                    .attr("height", 1000);
            var enterElements = svgContainer.selectAll("rect") //draw elements
                    .data(elementTags).enter().append("rect")
                    .attr("x", function(d, i)
                        return xPosLoop[i]*(elementWidth+25);
                    )
                    .attr("height", elementHeight)
                    .attr("y", function(d, i)
                        return yPosLoop[i]*(elementHeight+35);
                    )
                    .attr("width", elementWidth)
                    .attr("rx", 4)
                    .attr("fill", "steelblue")
                    .attr("stroke", "black")
                    .attr("stroke-width", 1);
            var addText = svgContainer.selectAll("text").data(elementTags).enter().append("text");

这是我告诉文本在哪里显示的地方，也是我需要帮助的地方。我希望文本自动在矩形中居中。

            var textElements = addText
                .attr("x", function(d, i)
                    return ((xPosLoop[i]*(elementWidth+25) +elementWidth/2))
                )
                .attr("y", function(d, i)
                    return ((yPosLoop[i]*(elementHeight+35)) + elementHeight/2 + 3)
                )
                .attr("font-family", "Arial Black")
                .attr("font-size", "20px")
                .attr("fill", "white")
                .text(function(d, i)return d;);

【参考方案1】：

您的代码似乎正确计算了矩形的中心并将文本放置在该点，但文本左对齐。如果是这样，您只需更改text-anchor 属性以使文本居中。那将是：

textElements.style("text-anchor", "middle")