Right justify right Y axis labels?

[Skip Montanaro]

Using this code:

 

    var right_y_scale = d3.scale.linear()
        .range([h-pad, pad*1.5])
        .domain([ minpos, maxpos ]);

    var right_y_axis = d3.svg.axis()
	.scale(right_y_scale)
	.orient("right");

with obvious (reasonable) values for h, pad, minpos, and maxpos, I get the following Y axis:

It's readable, but it seems to me that with the presence of a minpos...maxpos range which includes negative numbers, the tick labels should be right-justified. I horsed around with d3.format. It seems to be doing the right thing (inserting a pad space for positive numbers):

It seems that I'm SOL unless I change the font to a fixed width font. Am I missing something?

Thx,

Skip

[David Raynes]

Similar to something I've done, you could try selecting all the text
alements on the axis and changing their text-anchor style:

svg_var.append('g')
.call(right_y_axis)
.selectAll('text')
.style('text-anchor', 'end');

Skip Montanaro <skip.mo...@gmail.com> writes:

> Using this code:
>
>
> var right_y_scale = d3.scale.linear()
> .range([h-pad, pad*1.5])
> .domain([ minpos, maxpos ]);
>
> var right_y_axis = d3.svg.axis()
> .scale(right_y_scale)
> .orient("right");
>
>
> with obvious (reasonable) values for h, pad, minpos, and maxpos, I get the
> following Y axis:
>

> <https://lh6.googleusercontent.com/-PzAGNuQgMEk/U48_FVE1Q4I/AAAAAAAAER8/5muR4iGJp5w/s1600/right-axis.png>

>
> It's readable, but it seems to me that with the presence of a
> minpos...maxpos range which includes negative numbers, the tick labels
> should be right-justified. I horsed around with d3.format. It seems to be
> doing the right thing (inserting a pad space for positive numbers):
>

> <https://lh4.googleusercontent.com/-p3tZdA8cuGg/U49CUbQHa7I/AAAAAAAAESM/3zFruxNguw8/s1600/console.png>