Resolve mark vs. axis alignment offset.

When I display the following spec:

{
    "encoding": {
        "x": {
            "field": "a",
            "type": "quantitative"
        },
        "y": {
            "field": "b",
            "type": "quantitative"
        }
    },
    "data": {
        "values": [
            {
                "b": 2,
                "a": 2
            },
            {
                "b": 1,
                "a": 1
            }
        ]
    },
    "mark": "point"
}

And then zoom into it, I see that the point isn’t really centered on the grid lines:

is a zoomed version of the middle point.

I’m using the SVG renderer, and then of course the same happens if I convert to PNG, PDF etc.

[jheer]

@davidanthoff Thanks for sharing. This is a known, long-standing issue as @domoritz mentions. We just don’t (yet) happen to have a clean solution that doesn’t introduce other problems elsewhere. The issue is particularly salient with scalable vector graphics because when you zoom in, what used to be 0.5 pixel offset gets magnified. I’d certainly love to find a solution.

@kanitw what is the problem with the image you shared? Is it that the bars are not perfectly centered? (Keep in mind the time span for each bar is inclusive of its left gridline but not the right gridline…)

[jheer]

@kanitw: That sounds reasonable for many cases, but likely fails as a general rule if the spans get much larger or smaller. In your case the gridlines are stroked (centered between pixels by default) and the bars are filled (pixel aligned by default), so I believe our offset is actually making the alignment better (not worse), by snapping lines to proper pixels. I think the lack of centering arises due to the left-inclusive / right-exclusive span, which should be mathematically correct.

I’ll keep the issue focused on the point / grid alignment issue @davidanthoff raises. In the worst case, I could imagine adding config to control the offset, which at least might be useful for exported images, etc.