vega / vega-lite

A concise grammar of interactive graphics, built on Vega.
https://vega.github.io/vega-lite/
BSD 3-Clause "New" or "Revised" License
4.63k stars 601 forks source link

Single encoding selector with nearest does not work under specific conditions #9388

Open kgoodrick-uu opened 2 months ago

kgoodrick-uu commented 2 months ago

Bug Description

When a chart is created with a single x encoding, 5 values, and a size of width=250 and height=40, adding a selector with the nearest mode enabled does not allow the 2nd element to be selected. This works fine if wither the height or width are increased/decreased by 1. It also works if one changes the x encoding to y and swaps the width and height.

{
  "data": {"values": [{"x": 1}, {"x": 2}, {"x": 3}, {"x": 4}, {"x": 5}]},
  "mark": {"type": "point"},
  "encoding": {
    "color": {
      "condition": {"param": "x_selector", "value": "green"},
      "value": "grey"
    },
    "x": {"field": "x", "type": "nominal"}
  },
  "params": [
    {
      "name": "x_selector",
      "select": {
        "type": "point",
        "fields": ["x"],
        "nearest": true,
        "on": "click"
      },
      "value": 1
    }
  ],
  "height": 40,
  "width": 250
}

Here is a working example vega-editor. It is possible to select all points by clicking except the 2nd one.

A workaround for this is to use encodings=["x"], but I think it's possible that whatever is causing this could cause other bugs, so worth looking into.

Checklist

kgoodrick-uu commented 2 months ago

This appears to be caused by a bug while creating the Voroni diagram. If you make the stroke visible in the compiled Vega you can see that there is a line through the 2nd point when the width is 250.

image

However, if you change the width to 251 the diagram looks reasonable:

image

Given this I believe that the bug is in Vega, not Vega-Lite, so I have opened another issue in that repository.

kgoodrick-uu commented 2 months ago

This was fixed upstream in https://github.com/d3/d3-delaunay/pull/147