javascript 縦書き d3 の rect 要素でテキストを中央に中央揃えする方法



svg テキスト 変更 (1)

私は、データの配列を取り、各データ点の矩形を作成し、その矩形の中にテキストを表示するd3視覚化を作成しました。 しかし、私は座標を与えて、rectの内部に表示するテキストしか得ていません。 rect要素に自分自身を集中させる方法を私がどのように教えているのだろうかと思います。 ここにコードです:

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

次の部分では、rectを配置するために使用した配列を作成します

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

ここで私はテキストをどこに表示するのか、それは私が助けを必要とする場所です。 テキストを自動的にrectに配置したい。

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

あなたのコードはrectの中心を適切に計算し、その点にテキストを置きますが、テキストは左揃えにします。 その場合は、 text-anchorを中央にtext-anchorするためにtext-anchorプロパティを変更するだけです。 そうだろう。

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




d3.js