CODEWITHSUNDEEP
firefoxtextsvgd3.js
user2116164
user2116164

Reputation: 33

SVG text element text-anchor="middle" not working in Firefox

I'm using D3 to create a bar chart and I want to align the text label to the middle of the bars. I'm using the text-anchor attribute and setting it to "middle". This works well in Chrome but the alignment is way off in Firefox. I'm grouping the rects and text in separate parent g elements in order to achieve a bunch of different transitioning effects (Ex. splitting of bars) when the data is changed.

Here's my 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>

I have no clue what could be causing the issue. Could someone please help me troubleshoot?

Thanks!

Upvotes: 3

Views: 5804

Answers (2)

Robert Longson
Robert Longson

Reputation: 123985

You're using dx and dy to position the text when you should be using x and y

Upvotes: 0

Superboggly
Superboggly

Reputation: 5834

I think you should be using "x" instead of "dx" to place the labels. Figure you want the text at that x position and anchored on the middle. dx is meant to offset from the anchored position I think.

Similarly you probably mean to use "y" instead of "dy". Use dy to adjust the height above or below the baseline (often in "em" units) and y to actually position the text.

Try:

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

Upvotes: 5

Related Questions