svg.axis stroke width

[Mike Wood]

Hi,

I switched to using the d3.svg.axis from drawing myself. I have a
problem in that before I was able to draw a line of 1px. Now it
usually shows as 2px regardless of my settings. Have tried setting
styles for this class ("domain") - to no avail. The tickSize also
seems to result is just making the line as wide as the tick should be
long hence I am setting it to 1 - but it still is a 2px wide path.

var yAxis =
d3.svg.axis().scale(scaleY).ticks(numYGradients).orient("left").tickSize(1);

example element:
<path class="domain" d="M-1,0H0V305H-1">

with tickSize set to 6 I get a 6 pixel wide line:
<path class="domain" d="M-6,0H0V305H-6">

This is with FF6 and Safari.

Thanks,
Mike.

[Ricardo]

Try setting the class as follows:

.domain {
fill: none;
stroke: black;
stroke-width; 1;
}

The domain is actually a path (perhaps the css selector can be
path.domain) that regularly looks something like this:

|____________________________|

It has ticks (as defined by the tickSize) on both sides. If the fill
is set to something then it becomes a rectangle of height tickSize.
In your case setting the fill to none avoids this behavior. Setting
the stroke should give you the desired outcome.

- Ricardo

[Mike Wood]

Ah that's better! I was forgetting a path by default is filled so my try just set the stroke-width.

Thanks so much.

Mike.