g 元素在 svg 之外渲染

Question

我有一个使用 D3 创建的条形图。我省略了 JS 代码，因为问题与 html 和 css 有关，而不是与 D3 有关。

运行下面的代码片段。有 3 个部分（g 元素），每个部分都有一个标签和 3 个条（内部有一些文本）。第一个 g 元素似乎在 svg 之外渲染，切断了标签文本，我不明白为什么。

我已经尝试过的事情（不起作用）：

• svg 和 g 元素的相对位置。
• 溢出：可见（与其说是解决方案，不如说是一种黑客攻击）
• 将 svg 包装在clearfix div 中

我更喜欢一个解决方案，而不是像将 g 元素每个向下翻译 20 这样的 hack...

#chart{ width:100%;}

#chart rect {
  fill: steelblue;
}

#chart text.value {
  fill: white;
  font-size: 10px;
  text-anchor: end;
}

#chart text.value2 {
  fill: white;
  font-size: 12px;
}

#chart text.label {
  fill: black;
  font-size: 20px;
}

<svg id="chart" width="908" height="375">
   <g transform="translate(0,0)">
     <text class="label" x="0" y="0">test 1</text>
     <rect x="0" y="10" width="314.3076923076923" height="25"></rect>
     <text class="value" x="309.3076923076923" y="22.5" dy=".35em">25</text>
     <text class="value2" x="10" y="22.5" dy=".35em">a</text>
     <rect x="0" y="38" width="440.03076923076924" height="25"></rect>
     <text class="value" x="435.03076923076924" y="50.5" dy=".35em">35</text>
     <text class="value2" x="10" y="50.5" dy=".35em">b</text>
     <rect x="0" y="66" width="326.88000000000005" height="25"></rect>
     <text class="value" x="321.88000000000005" y="78.5" dy=".35em">26</text>
     <text class="value2" x="10" y="78.5" dy=".35em">c</text>
  </g>
  <g transform="translate(0,119)">
    <text class="label" x="0" y="0">test 2</text>
    <rect x="0" y="10" width="377.1692307692308" height="25"></rect>
    <text class="value" x="372.1692307692308" y="22.5" dy=".35em">30</text>
    <text class="value2" x="10" y="22.5" dy=".35em">a</text>
    <rect x="0" y="38" width="502.8923076923077" height="25"></rect>
    <text class="value" x="497.8923076923077" y="50.5" dy=".35em">40</text>
    <text class="value2" x="10" y="50.5" dy=".35em">b</text>
    <rect x="0" y="66" width="628.6153846153846" height="25"></rect>
    <text class="value" x="623.6153846153846" y="78.5" dy=".35em">50</text>
    <text class="value2" x="10" y="78.5" dy=".35em">c</text>
  </g>
  <g transform="translate(0,238)">
    <text class="label" x="0" y="0">test 3</text>
    <rect x="0" y="10" width="565.7538461538462" height="25"></rect>
    <text class="value" x="560.7538461538462" y="22.5" dy=".35em">45</text>
    <text class="value2" x="10" y="22.5" dy=".35em">a</text>
    <rect x="0" y="38" width="817.2" height="25"></rect>
    <text class="value" x="812.2" y="50.5" dy=".35em">65</text>
    <text class="value2" x="10" y="50.5" dy=".35em">b</text>
    <rect x="0" y="66" width="477.7476923076924" height="25"></rect>
    <text class="value" x="472.7476923076924" y="78.5" dy=".35em">38</text>
    <text class="value2" x="10" y="78.5" dy=".35em">c</text>
  </g>
</svg>

Answer 1

默认情况下，元素text.label“基线”位于文本的底部边缘。这意味着，当您在 (0,0) 处渲染文本时，文本将从左下角渲染。

要解决您的问题，您可以在 CSS 中添加dominant-baseline: hanging;规则text.label，并根据文本的高度向下调整栏。