Question

我有这个组元素和一个文本节点：

var legend = svg_container.append('g');
var legend_text = legend.append('text').attr('y', 0)
//other elements inside 'g'

这只是代码的一部分。实际上，我在文本节点之后动态创建的组元素中有其他子节点（这些其他元素决定了组元素的宽度）。

如何将文本节点集中放置在组元素中？

Answer 1

要使其居中，您可以使用带有text-anchor="middle"和x属性的文字属性y进行定位：

legend_text.attr("text-anchor","middle");
legend_text.attr("x", 0);
legend_text.attr("y", 0);

此处，您的文字将固定在论坛legend的中心原点。

事实上，它不会完全居中，为此，您应该将y设置为文字的font-size属性的一半。

希望我能正确理解你的问题！

编辑：有了你的指示，我看到两个解决方案：

我最喜欢的一个包括修改legend组，为他添加transform="translate(x,y)"属性，其中x和y是svg元素的中心。这个可能不适用于你的其余代码，但我发现这样做通常是让多个绘图在一个svg中共存的简洁方法。
到目前为止，另一个是简单的，我认为现在将回答你的问题：

您可以将x和y值替换为legend组的中心。这里的小问题是thoses值的计算，因为你无法直接从元素中读取它们。

实际上，g元素没有宽度或高度属性，它只是一个容器，用于为一组svg元素应用属性。这就是为什么我建议使用我的第一个解决方案。

Answer 2

使用bbox

将其集中在群组中的另一种方法

//make a g
var svg = d3.select("body").append("svg").attr("width", "900")
  .attr("height", "900").append("g");
//add circle to it
svg.append("circle").attr("cx", 50).attr("cy", 50).attr("r", 30);
svg.append("circle").attr("cx", 250).attr("cy", 150).attr("r", 30);
//get bbox
var bb = svg.node().getBBox();
var centery = bb.y + bb.height/2;
var centerx = bb.x + bb.width/2;

svg.append("text").text("Hello").attr("x",centerx).attr("y", centery)

工作代码here

在组元素内集中（水平）对齐文本节点

2 个答案: