Question

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

运行下面的代码段。有3个部分（g个元素），每个部分都有一个标签和3个条形（里面有一些文字）。第一个g元素似乎是在svg之外渲染，切断标签文本，我无法弄清楚原因。

我已经尝试过的东西（不起作用）：

相对于svg和g元素的位置。
溢出：可见（更像是一个黑客而非解决方案）
将svg包装在clearfix div中

我更喜欢一个解决方案，而不是像黑客一样将每个元素翻译成20个......

#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元素＆＃34;基线＆＃34;默认情况下，位于文本的下边缘。这意味着，当您在（0,0）处渲染文本时，文本将从左下角呈现。

要解决您的问题，您可以将dominant-baseline: hanging;添加到CSS中的text.label规则中，然后根据文字的高度调整条形。

在svg之外的g元素渲染

1 个答案: