1 pixel circle glitch

Community Help
1

When drawing 1px circle at 0,0 point, it takes 2px and grows left of the zero point. Looks like a bug to me.

image

  svg.append("circle")
    .attr("cx", x(0))
    .attr("cy", y(0))
    .attr("r", "1").attr("fill", "cyan")
2

It isn’t. “r” is the radius, so your circle diameter is 2. If you want pixel-perfect control (assuming that the viewBox area equals the SVG area, and that there are no scaling transformations), I’d recommend to draw a rect instead.

1 Like
3

My bad, I didn’t pay attention that r is not the width. Now if I set radius to 0.5 to draw the 1px circle, it is still 2px box but less intense. Almost invisible.

image

4

Perhaps this illustration will help you understand the problem:

image
image1082Ă—1080 15.4 KB

Each pixel gets colored proportional to how much of its area is covered by the circle. Even if you place a circle of r=.5 at x=.5 and y=.5, you still wouldn’t get the right color, because:

image
image1132Ă—1142 15.5 KB

I really, really recommend that you draw a rectangle instead, with x=0, y=0, width=1 and height=1.

3 Likes
5

I imagine that the main question here is: why is the circle center not aligned with the axes?

2 Likes
6

I was hoping that the illustrations would answer that question as well. :slight_smile:

1 Like
7

D3 axes are offset by a half-pixel so that they align exactly with pixel boundaries.

4 Likes
8

thanks, that’s the information I was missing

9

Then everything else should be offset the same way, no?