reactjs - react-vega - 获取点击事件的数据（为点击事件添加事件监听器）

Question

我使用“react-vega”和“react-rooltip”。它工作正常。它获取正确的数据并将其显示在工具提示上。但是我怎样才能得到点击事件的数据呢？我试图在规范中添加信号，但它们不起作用。

这是带有简单 vega 图表的演示： https ://codesandbox.io/s/w2lq37v7ll

我需要修改什么来为点击事件添加一个事件监听器。

我想要的是在用户单击 vega 图表上的任何对象时获得与工具提示相同的数据。

标签： reactjsvega

Answer 1

下面的代码将点击的国家形状的数据记录到浏览器控制台。

   "signals": [
    {
      "name": "signal_tooltip",
      "on": [
        {"events": "shape:click", "update": "warn(datum)"}
      ]
    }
  ],

要收听图表上所有标记项目（代码中的符号类型、形状类型）的事件，请更改{"events": "shape:click", ...为"events": "*:click", ...}

注意：您也可以使用View API addEventListener作为item第二个参数。item.datum将包含单击项目的数据。

view.addEventListener('click', function(event, item) {
  console.log(item.datum);
});

完整代码参考（使用信号）：

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "autosize": "pad",
  "padding": 5,
  "width": 800,
  "height": 500,
  "style": "cell",
  "signals": [
    {
      "name": "signal_tooltip",
      "on": [
        {"events": "shape:click", "update": "warn(datum)"}
      ]
    }
  ],
  "data": [
    {
      "name": "world",
      "url": "https://vega.github.io/editor/data/world-110m.json",
      "format": {
        "type": "topojson",
        "feature": "countries"
      }
    },
    {
      "name": "source_0",
      "values": [
        {
          "lon": -63.616672,
          "lat": -38.416097,
          "some_data01": 1000,
          "some_data02": 200,
          "code": "AR",
          "country": "Argentina"
        },
        {
          "lon": 133.775136,
          "lat": -25.274398,
          "some_data01": 1000,
          "some_data02": 200,
          "code": "AU",
          "country": "Australia"
        },
        {
          "lon": -95.712891,
          "lat": 37.09024,
          "some_data01": 1000,
          "some_data02": 200,
          "code": "US",
          "country": "UnitedStates"
        },
        {
          "lon": 78.96288,
          "lat": 20.593684,
          "some_data01": 1000,
          "some_data02": 200,
          "code": "IN",
          "country": "India"
        },
        {
          "lon": -106.346771,
          "lat": 56.130366,
          "some_data01": 50000,
          "some_data02": 2000,
          "code": "CA",
          "country": "Canada"
        },
        {
          "lon": 138.252924,
          "lat": 36.204824,
          "some_data01": 60000,
          "some_data02": 1000,
          "code": "JP",
          "country": "Japan"
        },
        {
          "lon": -3.435973,
          "lat": 55.378051,
          "some_data01": 60000,
          "some_data02": 1000,
          "code": "UK",
          "country": "United Kingdom"
        }
      ]
    },
    {
      "name": "data_1",
      "source": "source_0",
      "transform": [
        {
          "type": "geojson",
          "fields": ["lon", "lat"],
          "signal": "layer_1_layer_0_geojson_0"
        },
        {
          "type": "geopoint",
          "projection": "projection",
          "fields": ["lon", "lat"],
          "as": ["layer_1_layer_0_x", "layer_1_layer_0_y"]
        }
      ]
    },
    {
      "name": "data_2",
      "source": "source_0",
      "transform": [
        {
          "type": "geojson",
          "fields": ["lon", "lat"],
          "signal": "layer_1_layer_1_geojson_0"
        },
        {
          "type": "geopoint",
          "projection": "projection",
          "fields": ["lon", "lat"],
          "as": ["layer_1_layer_1_x", "layer_1_layer_1_y"]
        }
      ]
    }
  ],
  "projections": [
    {
      "name": "projection",
      "size": {
        "signal": "[width, height]"
      },
      "fit": {
        "signal": "[data('world'), layer_1_layer_0_geojson_0, layer_1_layer_1_geojson_0]"
      },
      "type": "mercator"
    }
  ],
  "marks": [
    {
      "name": "layer_0_marks",
      "type": "shape",
      "style": ["geoshape"],
      "from": {
        "data": "world"
      },
      "encode": {
        "update": {
          "fill": {
            "value": "lightgray"
          },
          "stroke": {
            "value": "white"
          }
        }
      },
      "transform": [
        {
          "type": "geoshape",
          "projection": "projection"
        }
      ]
    },
    {
      "name": "layer_1_layer_0_marks",
      "type": "symbol",
      "style": ["circle"],
      "from": {
        "data": "data_1"
      },
      "encode": {
        "update": {
          "opacity": {
            "value": 0.7
          },
          "fill": {
            "value": "orange"
          },
          "tooltip": {
            "signal": "{\"country\": ''+datum[\"country\"], \"some_data01\": format(datum[\"some_data01\"], \"\"), \"some_data02\": format(datum[\"some_data02\"], \"\")}"
          },
          "x": {
            "field": "layer_1_layer_0_x"
          },
          "y": {
            "field": "layer_1_layer_0_y"
          },
          "shape": {
            "value": "circle"
          }
        }
      }
    },
    {
      "name": "layer_1_layer_1_marks",
      "type": "text",
      "style": ["text"],
      "from": {
        "data": "data_2"
      },
      "encode": {
        "update": {
          "dy": {
            "value": -6
          },
          "fill": {
            "value": "black"
          },
          "tooltip": {
            "signal": "{\"country\": ''+datum[\"country\"], \"some_data01\": format(datum[\"some_data01\"], \"\"), \"some_data02\": format(datum[\"some_data02\"], \"\")}"
          },
          "x": {
            "field": "layer_1_layer_1_x"
          },
          "y": {
            "field": "layer_1_layer_1_y"
          },
          "text": {
            "signal": "''+datum[\"country\"]"
          },
          "align": {
            "value": "center"
          }
        }
      }
    }
  ],
  "config": {
    "axisY": {
      "minExtent": 30
    }
  }
}