D3.js 将两个文本元素居中对齐，在矩形中不重叠

我们在一个矩形中有两个文本元素。第一个文本元素是类似于圆形的字体图标，第二个是文本。现在，我们希望将其与矩形的中心对齐，以便首先是圆，然后是文本（如项目符号）。但是，在这种情况下，我们如何做到这一点

            percentageEntering
                .append('svg:rect')
                .style('fill', '#F3F3F4')
                .attr('width', width)
                .attr('height', height);

            percentageEntering
                .append('svg:text')
                .attr('x', width / 2)
                .attr('y', height / 2)
                .attr('dy', '0.35em')
                .attr('text-anchor', 'middle')
                .attr('font-family', 'Material Icons')
                .style('font-size', '20px')
                .style('fill', d => this.subBreadcrumbPercentageColors[d.depth])
                .text('some_icon');

            percentageEntering
                .append('svg:text')
                .attr('x', width / 2)
                .attr('y', height / 2)
                .attr('dy', '0.35em')
                .attr('text-anchor', 'middle')
                .style('font-size', d => {
                    const size = ((legendData.length - 2) > 0)
                        ? 12 - (legendData.length - 2)
                        : 12;
                    return `${size}px`;
                })
                .text(d => {
                    return d.quantity + ' - ' + d.name + ((nodeArray.length === 3) ? ' %' : '');
                });

编辑 在@Gerardo提议的更改之后，以下是输出。所以首先我要补充一点

---

为了使文本不使用图标字体，除此之外（例如：-

some_icon

表示图标）。那么，我怎样才能确保这些风格不会影响孩子呢？注意到文本不是垂直居中的，当我添加一个

y

参数时，图标和文本重叠。

最简单的修复方法是将第二个

元素作为

追加。像这样：

percentageEntering
    .append('text')
    .attr('x', width / 2)
    .attr('y', height / 2)
    .attr('dy', '0.35em')
    .attr('text-anchor', 'middle')
    .attr('font-family', 'Material Icons')
    .style('font-size', '20px')
    .style('fill', d => this.subBreadcrumbPercentageColors[d.depth])
    .text('some_icon')
    .append('tspan')
    .style('font-size', d => {
        const size = ((legendData.length - 2) > 0) ? 12 - (legendData.length - 2) : 12;
        return `${size}px`;
    })
    .text(d => {
        return d.quantity + ' - ' + d.name + ((nodeArray.length === 3) ? ' %' : '');
    });

由于将

文本锚定

应用于父文本，因此所有内容（即

元素及其

子元素）都应位于中心

下面是一个演示：

常数x=50，
y=20，
宽度=150，
高度=50；
const svg=d3.选择（“svg”）
const rect=svg.append（“rect”）
.attr（“x”，x）
.attr（“y”，y）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.style（“填充”、“小麦”）
.样式（“边框”、“灰色”）；
const text=svg.append（“文本”）
.attr（'x'，x+宽度/2）
.attr（'y'，y+高度/2）
.attr（'dy'，'0.35em'））
.attr（'text-anchor'，'middle'）
.attr（'字体系列'，'材质图标'）
.style（'font-size'，'20px'）
.style（“填充”、“红色”）
.text（“\u25CF”）
.append（'tspan'）
.style（'填充'，“深灰色”）
.text（“foo-bar-baz”）

在应用您建议的更改后，您能看一下我在主要问题中发布的编辑吗？它确实有效，但引入了一些需要解决的其他问题。@MilindaD您必须为tspan元素设置新的字体系列，以及删除dy属性。好的，现在的问题是如何在不添加
dy
属性的情况下垂直居中元素。@MilindaD我没有这样做：您只需要从tspan元素中删除
dy
属性，它将位于父文本的同一垂直位置。我想也许Gerardo的意思是从现在是
的元素中删除
dy
。如果要保持垂直居中，则不希望将其从主
元素中删除。它似乎从他的演示片段中丢失了，所以我把它放回去了。
percentageEntering
    .append('text')
    .attr('x', width / 2)
    .attr('y', height / 2)
    .attr('dy', '0.35em')
    .attr('text-anchor', 'middle')
    .attr('font-family', 'Material Icons')
    .style('font-size', '20px')
    .style('fill', d => this.subBreadcrumbPercentageColors[d.depth])
    .text('some_icon')
    .append('tspan')
    .style('font-size', d => {
        const size = ((legendData.length - 2) > 0) ? 12 - (legendData.length - 2) : 12;
        return `${size}px`;
    })
    .text(d => {
        return d.quantity + ' - ' + d.name + ((nodeArray.length === 3) ? ' %' : '');
    });