D3.js图例rect与text对齐重叠 如何实现文本在矩形右侧排布

图例出现矩形和文本重叠，核心源于两个错误：

• 文本设置了text-anchor: end，该属性会让文本右边缘对齐指定的x坐标，文本整体向x坐标左侧延伸，极易覆盖左侧矩形
• 定位逻辑重复冲突：外层<g>已经设置了transform偏移，内部rect和text又叠加了一套全局x坐标计算，再加硬编码固定偏移（text的x值加110），间距没有和矩形宽度绑定，位置计算完全不可控

推荐简化定位逻辑，统一用外层<g>控制每个图例项的整体位置，内部元素相对于当前组的原点做相对定位，避免多套偏移叠加出错：

1. 外层g只负责按索引平移到对应位置，不再给内部rect、text叠加全局偏移
2. rect相对于g原点定位，x值设为0即可
3. text的x坐标直接设为矩形宽度 + 边距，同时把text-anchor改为start，让文本从x坐标位置向右排布，正好接在矩形后方

// 可根据文本实际长度调整单个图例项占用宽度
const legendItemWidth = 100;
// 图例整体起始坐标
const legendStartX = padding.top * 2 + 40;
const legendPosY = height - 190;

var legend = svgColorCode.selectAll(".legend")
             .data(keys)
             .enter().append("g")
             .attr("class", "legend")
             .attr("transform", function (d, i) { 
               return `translate(${legendStartX + i * legendItemWidth}, ${legendPosY})`; 
             });
                    
legend.append("rect")
            .attr("x", 0)
            .attr("width", 18)
            .attr("height", 18)
            .style("fill", function (d, i) { return colors[i]; })

legend.append("text")
            // 矩形宽度18，加5px间距避免文本贴在矩形上
            .attr("x", 18 + 5)
            .attr("y", 9)
            .attr("font-size","0.5rem")
            .attr("dy", ".35em")
            // 文本左对齐，从x位置开始向右排布
            .style("text-anchor", "start")
            .text(function (d) { return d; });

如果不想调整现有整体定位逻辑，仅修改两处即可解决重叠问题：

• 把text元素的text-anchor属性从end改为start
• 把text的x属性值从(padding.top * 2 + labHeight * i)+110改为(padding.top * 2 + labHeight * (i))+40 + 18 + 5，直接基于rect的x坐标+矩形宽度+固定间距计算，删除硬编码的110偏移

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