3

D3 を使用して棒グラフを作成していますが、テキスト ラベルを棒の中央に揃えたいと考えています。text-anchor 属性を使用して、「中」に設定しています。これは Chrome ではうまく機能しますが、Firefox では配置がかなりずれています。データが変更されたときにさまざまな遷移効果 (バーの分割など) を実現するために、四角形とテキストを別々の親 g 要素にグループ化しています。

ここに私のSVGがあります:

<svg width="650" height="400">
 <g class="groups" transform="translate(25,0)">
  <g class="group" transform="translate(0,0)">
   <g class="bar"><rect class="subBar" x="0" y="60" width="192" height="310"/></g>
   <g class="dataLabel"><text text-anchor="middle" class="subLabel" style="font-size: 14px; opacity: 1;" dx="96.25" dy="55">83%</text></g>
  </g>
  <g class="group" transform="translate(207.5,0)">
   <g class="bar"><rect class="subBar" x="0" y="97.22891566265059" width="192" height="272.7710843373494"/></g>
   <g class="dataLabel"><text text-anchor="middle" class="subLabel" style="font-size: 14px; opacity: 1;" dx="96.25" dy="92.22891566265059">73%</text></g>
  </g>
  <g class="group" transform="translate(415,0)">
   <g class="bar"><rect class="subBar" x="0" y="93.50602409638549" width="192" height="276.4939759036145"/></g>
   <g class="dataLabel"><text text-anchor="middle" class="subLabel" style="font-size: 14px; opacity: 1;" dx="96.25" dy="88.50602409638549">74%</text></g>
  </g>
</g>
</svg>

何が問題を引き起こしているのか、私にはわかりません。誰かがトラブルシューティングを手伝ってくれませんか?

ありがとう！

4

2 に答える 2

5

ラベルの配置には「dx」ではなく「x」を使用する必要があると思います。そのx位置にテキストを配置し、中央に固定する図。dxは、固定位置からオフセットすることを意図していると思います。

同様に、おそらく「dy」の代わりに「y」を使用することを意味します。dyを使用してベースラインの上下の高さを調整し（多くの場合「em」単位）、yを使用して実際にテキストを配置します。

試す：

<svg width="650" height="400">
 <g class="groups" transform="translate(25,0)">
  <g class="group" transform="translate(0,0)">
   <g class="bar"><rect class="subBar" x="0" y="60" width="192" height="310"/></g>
   <g class="dataLabel"><text text-anchor="middle" class="subLabel" style="font-size: 14px; opacity: 1;" x="96.25" y="55">83%</text></g>
  </g>
  <g class="group" transform="translate(207.5,0)">
   <g class="bar"><rect class="subBar" x="0" y="97.22891566265059" width="192" height="272.7710843373494"/></g>
   <g class="dataLabel"><text text-anchor="middle" class="subLabel" style="font-size: 14px; opacity: 1;" x="96.25" y="92.22891566265059">73%</text></g>
  </g>
  <g class="group" transform="translate(415,0)">
   <g class="bar"><rect class="subBar" x="0" y="93.50602409638549" width="192" height="276.4939759036145"/></g>
   <g class="dataLabel"><text text-anchor="middle" class="subLabel" style="font-size: 14px; opacity: 1;" x="96px" y="88.50602409638549">74%</text></g>
  </g>
 </g>
</svg>
于 2013-02-27T18:18:48.447 に答える
0

x と y を使用する必要があるときに、dx と dy を使用してテキストを配置しています

于 2013-02-27T19:06:51.323 に答える