Giters

vega / vega

A visualization grammar.

Home Page:https://vega.github.io/vega

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Signal mousover event not working

bogdanbeca opened this issue · comments

commented

The mousover event on signal does not work on vega@5.26.0 (it is working on vega@5.25.0).
Mouseover should toggle the fill color to red in the below example.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vega@5.26.0"></script>
 
</head>
<body>
  <div id="vis"/>
  <script>
    const spec = {
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic bar chart example, with value labels shown upon mouse hover.",
  "width": 400,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [
        {"category": "A", "amount": 28},
        {"category": "B", "amount": 55},
        {"category": "C", "amount": 43},
        {"category": "D", "amount": 91},
        {"category": "E", "amount": 81},
        {"category": "F", "amount": 53},
        {"category": "G", "amount": 19},
        {"category": "H", "amount": 87}
      ]
    }
  ],
  "signals": [
    {
      "name": "active",
      "value": {},
      "on": [
        {"events": "rect:mouseover", "update": "datum"},
        {"events": "rect:mouseout", "update": "{}"}
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "category"},
      "range": "width",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "yscale",
      "domain": {"data": "table", "field": "amount"},
      "nice": true,
      "range": "height"
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "xscale"},
    {"orient": "left", "scale": "yscale"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "category"},
          "width": {"scale": "xscale", "band": 1},
          "y": {"scale": "yscale", "field": "amount"},
          "y2": {"scale": "yscale", "value": 0}
        },
        "update": {"fill": [{"test": "datum === active", "value":  "red"}, {"value": "steelblue"}]} 
       
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#333"}
        },
        "update": {
          "x": {"scale": "xscale", "signal": "active.category", "band": 0.5},
          "y": {"scale": "yscale", "signal": "active.amount", "offset": -2},
          "text": {"signal": "active.amount"},
          "fillOpacity": [
            {"test": "datum === active", "value": 0},
            {"value": 1}
          ]
        }
      }
    }
  ],
  "config": {}
};
        
  view = new vega.View(vega.parse(spec), {
                renderer: 'canvas',  
                container: '#vis',    
                hover: true   
            });

 
  </script>
</body>
</html>
commented

Cross-linking vega/altair#3257. It seems more people are facing this issue.

commented

Thanks for sharing. One change we've made is to prefer pointer events to mouse events for better compatibility with mobile. For example see the (working in 5.26) variant of this example here: https://vega.github.io/vega/examples/bar-chart/

Nevertheless, mouse events should of course still work. We'll take a closer look.

commented

Thanks again for reporting. It looks like the external contributions to prioritize pointer events broke mouse event handling within the Canvas (but not SVG) event handler. I have a PR with a fix here: #3826