Comment centrer un texte dans un élément rect de d3?

j'ai créé un d3 visualisation qui prend un tableau de données, crée un rect pour chaque point de données, puis affiche le texte dans le rectangle. Cependant, j'ai seulement obtenu le texte à afficher à l'intérieur du rect en lui donnant des coordonnées. Je me demande comment je lui dirais de se centrer dans l'élément rect. Voici le code:

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

la partie suivante crée des tableaux que j'ai utilisés pour positionner les rects

            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]

réglez leur largeur et hauteur

            var elementWidth = 210;
            var elementHeight = 60;

créer le svg contenant et ajouter des rectangles

            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");

et c'est là où je dis le texte à afficher, c'est aussi là où j'ai besoin d'aide. Je veux que le texte se centrer dans les rects automatiquement.

            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;});