D3文本与直接对齐

Question

我有矩形和描述文本上方图表 -

问题是描述文本与rects无法正确对齐。描述变成了矩形。我想在rect结束后启动文本。

我有以下代码 -

var legend = svgColorCode.selectAll(".legend")
             .data(keys)
             .enter().append("g")
             .attr("class", "legend")
             .attr("transform", function (d, i) { return "translate(" +  (((keys.length-(i))*-25)) + "," + (height -190) + ")"; })
             .attr("fill", function (d, i) { return colors[i]; });
                    
legend.append("rect")
            .attr("x", (x,i)=> (padding.top * 2 + labHeight * (i))+40)
            .attr("width", 18)
            .attr("height", 18)
            .style("fill", function (d, i) { return colors[i]; })

legend.append("text")
            .attr("x", (x,i)=> (padding.top * 2 + labHeight * i)+110)
            .attr("y", 9)
            .attr("font-size","0.5rem")
            .attr("dy", ".35em")
            .style("text-anchor", "end")
            .text(function (d) { return d; });

html为颜色ret和描述文本生成 -

<svg>
  <g class="legend" transform="translate(-100,10)">
    <rect x="100" width="18" height="18"></rect>
    <text x="170" y="9" font-size="0.5rem" dy=".35em" style="text-anchor: end;">
      description text1
    </text>
  </g>
  <g class="legend" transform="translate(-75,10)" style="/* width: 10rem; */">
    <rect x="150" width="18" height="18"></rect>
    <text
      x="220"
      y="9"
      font-size="0.5rem"
      dy=".35em"
      style="text-anchor: end;/* margin-left: 29rem; *//* padding-left: 1rem; */"
    >
      description text2
    </text>
  </g>
  <g class="legend" transform="translate(-50,10)">
    <rect x="200" width="18" height="18"></rect>
    <text x="270" y="9" font-size="0.5rem" dy=".35em" style="text-anchor: end;">
      description text3
    </text>
  </g>
  <g class="legend" transform="translate(-25,10)">
    <rect x="250" width="18" height="18"></rect>
    <text x="320" y="9" font-size="0.5rem" dy=".35em" style="text-anchor: end;">
      description text4
    </text>
  </g>
</svg>;

如何避免混合颜色rect和描述文本？并且只需启动描述颜色rect之后的文本？

Answer 1

将其更改为“开始”的文本锚。您将文本的锚定在最后，所以这就是为什么文本向左移动以结束的原因

尝试减少（padding.top * 2 + labheight * i）+110）以大约50-60px，并具有文本启动文本的启动元素。您可以根据所需的样式调整利润率

<svg>
  <g class="legend" transform="translate(-100,10)">
    <rect x="100" width="18" height="18"></rect>
    <text x="120" y="9" font-size="0.5rem" dy=".35em" style="text-anchor: start;">
      description text1
    </text>
  </g>
  <g class="legend" transform="translate(-75,10)" style="/* width: 10rem; */">
    <rect x="150" width="18" height="18"></rect>
    <text
      x="170"
      y="9"
      font-size="0.5rem"
      dy=".35em"
      style="text-anchor: start;/* margin-left: 29rem; *//* padding-left: 1rem; */"
    >
      description text2
    </text>
  </g>
  <g class="legend" transform="translate(-50,10)">
    <rect x="200" width="18" height="18"></rect>
    <text x="220" y="9" font-size="0.5rem" dy=".35em" style="text-anchor: start;">
      description text3
    </text>
  </g>
  <g class="legend" transform="translate(-25,10)">
    <rect x="250" width="18" height="18"></rect>
    <text x="270" y="9" font-size="0.5rem" dy=".35em" style="text-anchor: start;">
      description text4
    </text>
  </g>
</svg>;