Align text to support dynamic content

Question

In my fiddle here, the % symbol is currently in fixed position. How do I align it so that it floats accordingly if the number changes from one digit to two digit to three digit?

I tried:

   .style("float", "left")

But it didnt work. What am I missing?

score 3 · Answer 1 · edited Feb 20 '14 at 06:48

3

Not good, but worked Fiddle:

g.append("text")
 .attr(
     "x", 
     parseInt(textElement.attr("x")) + parseInt(textElement[0][0].clientWidth)
 )

Unknown User's solution correctly.

edited Feb 20 '14 at 06:48

Unknown User

3,598
9
43
81

answered Feb 19 '14 at 12:04

maximkou

5,252
1
20
41

You are perfect. Aligning the text next to it using the `x` attr was a great idea. +1 :) – Unknown User Feb 19 '14 at 12:07
@UnknownUser You have a competitor now ;) – Rahul Desai Feb 19 '14 at 12:10
1

LOL :) I don't have any problem. – Unknown User Feb 19 '14 at 12:11
@UnknownUser +1 Thats the spirit :) – Rahul Desai Feb 19 '14 at 12:12
@maximkou: One problem: This solution does not work in Firefox. The `%` is overlapping the value. – Rahul Desai Feb 19 '14 at 12:15
Found an alternate. Instead of creating two text elements. We can use a javascript library named [**`lettering.js`**](http://letteringjs.com/) and could target any word using pseudo property :) like `::lastword`. – Unknown User Feb 19 '14 at 12:15
@RahulDesai, it's not that bad, rather than very pretty:) I think there is a more elegant solution. – maximkou Feb 19 '14 at 12:16
It works well in Chrome but not in Firefox. What are we missing here? – Rahul Desai Feb 19 '14 at 12:28
@RahulDesai, now I look the problem. – maximkou Feb 19 '14 at 12:31
What is that `clientWidth` anyways? – Unknown User Feb 19 '14 at 12:37
@UnknownUser, `clientWidth` is DOM element's visible for client part width, in Firefox this attribute somehow is 0. – maximkou Feb 19 '14 at 12:38
If you don't mind can you explain what are you doing in that statement? I only get that you taking the `x` value of the textElement and I don't know after that. – Unknown User Feb 19 '14 at 12:40
1

@UnknownUser, I get `textElement` `x` attribute value and sum its with `textElement` width. T.e. textElement.x + textElement.width – maximkou Feb 19 '14 at 12:43
Try if you can help him in [**`this`**](http://stackoverflow.com/questions/21853456/eliminate-border-radius-in-the-interim-of-the-rectangles) – Unknown User Feb 19 '14 at 12:45
@UnknownUser Follow-up question: http://stackoverflow.com/questions/21882042/background-bar-distorting – Rahul Desai Feb 19 '14 at 13:47

score 2 · Answer 2 · edited May 23 '14 at 23:26

2

You can simply concatenate with the % symbol and so it dances accordingly.

Demo

edited May 23 '14 at 23:26

animuson

53,861
28
137
147

answered Feb 19 '14 at 11:57

Unknown User

3,598
9
43
81

You seem to be a champ at D3 :) – Rahul Desai Feb 19 '14 at 11:57
Lol. No! I'm a beginner too. – Unknown User Feb 19 '14 at 11:59
1

Actually the problem here is that the `value` and `%` symbol have different font sizes, thats why two different `text` elements were created. How do I fix this? – Rahul Desai Feb 19 '14 at 12:01

Align text to support dynamic content

2 Answers2