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

我创build了一个d3可视化，它接收一组数据，为每个数据点创build一个矩形，然后在矩形中显示文本。 但是，我只通过给它坐标得到文本显示在矩形内部。 我想知道如何告诉它以rect元素为中心。 这里是代码：

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

接下来的部分创build了我用来定位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; 

创buildSVG容器并添加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"); 

这里是我告诉文本在哪里显示，这也是我需要帮助的地方。 我希望文本自动地集中在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;}); 

Answer 1

看起来你的代码正确地计算了矩形的中心，并把文本放在那一点，除了文本是左alignment的。 如果是这样，你只需要改变text-anchor属性来居中文本。 那将是：

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