If the x-axis label is long, it is getting overlapper on the next label like this. How do I set a width to it so that it appears as in the snapshot below?
x-axis code:
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(10,10);
Asked
Active
Viewed 344 times
0
Rahul Desai
- 15,242
- 19
- 83
- 138
-
Try [**`This`**](http://stackoverflow.com/questions/21770344/truncate-text-in-d3). – Unknown User Feb 19 '14 at 08:46
-
@UnknownUser: It did not work for me: http://jsfiddle.net/rdesai/5stce/21/ What am I missing? – Rahul Desai Feb 19 '14 at 08:57
1 Answers
1
I couldn't do the exact thing what's there in the image.
But i found this from this link.
Wrapping the x axis labels using a custom function.
Hope this helps. :)
user3206082
- 431
- 9
- 18
Unknown User
- 3,598
- 9
- 43
- 81
-
Looks good! How do I add the function so that it takes the substring and appends `...` in there? – Rahul Desai Feb 19 '14 at 10:08
-
That's the thing i couldn't find out. I guess you actually don't need to take sub string. It'll wrap the entire text to be visible at any length. And that's more convenient than the sub string where the users see the entire label nice and clean. – Unknown User Feb 19 '14 at 10:08
-
Increase the height of the `svg`. Actually the text is getting wrapped but the height of svg is not enough to display it entirely. `.attr("height", height + margin.top + margin.bottom + 20)`. Try adding +20. – Unknown User Feb 19 '14 at 11:46
-
Can you please take a look at this qiestion of mine? http://stackoverflow.com/questions/22087358/tooltip-fetching-incorrect-data – Rahul Desai Feb 28 '14 at 06:14