d3のrect要素にテキストを配置する方法は？

Question

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

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

次の部分は、私は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] 

を位置決めするために使用されるアレイを作成

  var elementWidth = 210; 
      var elementHeight = 60; 

その幅と高さを設定SVGコンテナを作成し、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"); 

およびここで私はテキストをどこに表示するのか、それは私が助けが必要な場所です。テキストを自動的に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;}); 

Answer 1

あなたのコードでは、rectの中心を正しく計算し、その位置にテキストを配置するように見えますが、テキストは左揃えになります。その場合は、text-anchorプロパティを変更してテキストを中央に配置するだけです。それは次のようになります：

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