與矩形對齊的D3文本

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

問題是描述文本沒有與矩形正確對齊。描述正在混入矩形。我想在 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 -

<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>;

如何避免混合顏色矩形和描述文本？并在顏色矩形后簡單地開始描述文本？

uj5u.com熱心網友回復：

將此更改為將文本錨定為“開始”。您將文本的錨點放在末尾，這就是為什么文本向左移動以對齊到末尾

嘗試將 (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>;

標籤：javascript html jQuery 反应 d3.js

上一篇：超出軸/軸的條形太短且范圍不正確

下一篇：使用d3在單個影像上附加多個多邊形