使用 svg 的视图框属性后，离散图例的显示标签出现问题

Question

我使用 svg 创建了离散图例，我想将索引显示为它的标签。

// creating svg
selectedLegend
.append("svg")
.attr("viewBox", `0 0 ${count} 1`)
.attr("preserveAspectRatio", "none")

function legend(g: any) {
// appending data
g.selectAll("g.legendCells")
.data(itemColor)
.enter()
.append("rect");
// appending text for label, which is not working as expected
g.selectAll("rect")
.append("text")
.attr("class", "breakLabels")
.style("fill", "red")
.attr("x", cellWidth + cellPadding)
.attr("y", 5 + cellHeight / 2)
.text(function (d: Record<string, unknown>, i: any) {
// return the index, which should be label for legend
return i;
});
}

Fiddle link : https://jsfiddle.net/03bxhoyq/2/

我想要像下面的红色一样，它必须将标签显示为 0 和 1 表示蓝色等等。

类似这样，但请注意图像是垂直图例，我的是水平图例。

Answer 1

注意不要将 <text> 元素作为子元素放置到 <rect>。他们是独立的。缩放 (preserveAspectRatio="none") 也适用于文本，因此将一个 SVG 放在另一个 SVG 中可能是个好主意。内部 SVG 具有缩放比例，外部 SVG 具有文本。外部 SVG 有一个与 height/width 比率匹配的 viewBox（10 比 1 = 250 比 25）。

在 <text> 上，我添加了属性 dominant-baseline="middle" 和 text-anchor="middle" 以将文本句柄定位在它的中间。

<div id="container">
  <svg viewBox="0 0 20 2" width="400px">
    <svg viewBox="0 0 4 1" preserveAspectRatio="none" width="100%" height="1" >
      <rect x="0" y="0" height="1" width="1" style="fill: rgb(255, 46, 0);"/>
      <rect x="1" y="0" height="1" width="1" style="fill: rgb(0, 184, 0);"/>
      <rect x="2" y="0" height="1" width="1" style="fill: rgb(0, 25, 255);"/>
      <rect x="3" y="0" height="1" width="1" style="fill: rgb(179, 179, 179);"/>
    </svg>
    <g dominant-baseline="middle" text-anchor="middle" font-size=".73">
      <text x="2.5" y="1.5" style="fill: black;">0</text>
      <text x="7.5" y="1.5" style="fill: black;">1</text>
      <text x="12.5" y="1.5" style="fill: black;">2</text>
      <text x="17.5" y="1.5" style="fill: black;">3</text>
    </g>
  </svg>
</div>

使用 svg 的视图框属性后，离散图例的显示标签出现问题

Issue with displaying label for the discrete legends after using view box attribute for svg

svg

label

legend

discrete