Adding line break in d3 axis tick labels

[srinath kasukurti]

I am trying to add a line break to the tick labels. I have to show date & time as tick labels similar to

var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .ticks(5)
            .tickSize(-height,0,0)
            .tickFormat(d3.time.format("%m/%d %H:%M"));

The above lines of code adds in the format 03/13 03:00, but i am not able to add line break to that.

Please suggest me how can we get line breaks for tick labels.

[srinath kasukurti]

I am trying to get something like
03/13
03:00  as tick label format.

[Chris Viau]

You could use the tspan element, but you will have to tokenize the string yourself. Another way is by using a div through foreignObject, to get the same behavior as wrapping in a div. If you want a shim for the upcoming SVG flowText, here is a nice implementation: http://www.carto.net/svg/textFlow/

--

You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.