web-dev-qa-db-fra.com

Comment centrer du texte dans un élément rect en d3?

J'ai créé une visualisation d3 qui prend un tableau de données, crée un rect pour chaque point de données, puis affiche le texte dans le rect. Cependant, je n'ai obtenu que le texte à afficher à l'intérieur du rect en lui donnant des coordonnées. Je me demande comment je pourrais lui dire 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]

définir leur largeur et leur hauteur

            var elementWidth = 210;
            var elementHeight = 60;

créer le conteneur svg et ajouter des rects

            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à que je dis au texte où afficher, c'est aussi là que j'ai besoin d'aide. Je veux que le texte se centre automatiquement dans les rects.

            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;});
javascriptd3.js
48
user2391236

Il semble que votre code calcule correctement le centre du rect et place le texte à ce point, sauf que le texte est aligné à gauche. Si c'est le cas, il vous suffit de modifier le text-anchor propriété pour centrer le texte. Ce serait:

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