矩形内字体图标与文本居中对齐无重叠的D3实现问题

我来帮你搞定这两个问题，咱们一步步拆解解决方案：

问题1：避免样式向子元素溢出 #

SVG元素默认会继承父元素的样式，但咱们不用搞复杂的隔离方案，只要给每个<text>元素明确指定独立的样式属性就能避免互相干扰。具体来说：

• 图标文本：必须明确设置font-family: 'Material Icons'，确保它用图标字体
• 普通文本：明确设置你需要的字体（比如font-family: 'Open Sans', sans-serif），防止它继承图标的字体

这样不管父元素有没有样式，每个文本元素都用自己指定的样式，就不会出现样式溢出的问题了。

问题2：实现图标与文本的居中对齐且无重叠 #

原来的代码把两个文本都堆在了同一个坐标点，自然会重叠。咱们换个思路：用一个容器<g>元素把图标和文本包起来，先让这个容器在矩形里居中，再调整容器内图标和文本的相对位置，这样既保证整体居中，又不会重叠。

修改后的完整代码示例 #

// 先添加背景矩形
percentageEntering.append('svg:rect')
  .style('fill', '#F3F3F4')
  .attr('width', width)
  .attr('height', height);

// 创建容器g，先让它定位到矩形中心
const textContainer = percentageEntering.append('svg:g')
  .attr('transform', d => `translate(${width/2}, ${height/2})`);

// 添加Material图标文本
const iconText = textContainer.append('svg:text')
  .attr('x', 0)
  .attr('y', 0)
  .attr('dominant-baseline', 'middle') // 确保垂直居中
  .attr('text-anchor', 'end') // 图标右对齐，方便文本接在右侧
  .attr('font-family', 'Material Icons')
  .style('font-size', '20px')
  .style('fill', d => this.subBreadcrumbPercentageColors[d.depth])
  .text('some_icon');

// 添加普通文本
const labelText = textContainer.append('svg:text')
  .attr('x', 10) // 图标和文本之间留10px间距，可按需调整
  .attr('y', 0)
  .attr('dominant-baseline', 'middle') // 和图标保持垂直对齐
  .attr('text-anchor', 'start')
  .attr('font-family', "'Open Sans', sans-serif") // 明确指定字体，避免继承
  .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) ? ' %' : '');
  });

// 可选：让整个图标+文本组合完全水平居中（解决图标+文本整体偏左/偏右的问题）
// 注意：这段代码要在DOM渲染后执行，比如用setTimeout或者D3的更新回调
iconText.each(function() {
  const iconWidth = this.getBBox().width;
  const textWidth = labelText.node().getBBox().width;
  const totalContentWidth = iconWidth + 10 + textWidth; // 图标宽度+间距+文本宽度
  // 调整容器位置，让整体居中
  textContainer.attr('transform', `translate(${width/2 - totalContentWidth/2}, ${height/2})`);
});

代码关键细节解释： #

1. 容器<g>的作用：通过translate把容器定位到矩形中心，里面的所有元素都基于这个中心点布局，不用再给每个文本单独设置x: width/2和y: height/2。
2. 垂直居中：用dominant-baseline: middle替代dy: '0.35em'，能更精准地让文本的垂直中心对齐到容器的y轴位置，避免垂直偏移。
3. 避免重叠：给图标设置text-anchor: end，文本设置x: 10（间距），让文本紧贴在图标的右侧，自然不会重叠。
4. 完全水平居中：如果需要让图标+文本的组合严格居中，可通过getBBox()获取图标和文本的宽度，计算总宽度后调整容器的偏移量，确保整体在矩形正中间。

内容的提问来源于stack exchange，提问作者MilindaD