response-vega - получить данные о событии щелчка (добавить прослушиватель событий для событий щелчка) - PullRequest
Новая
       8

response-vega - получить данные о событии щелчка (добавить прослушиватель событий для событий щелчка)

0 голосов
/ 27 декабря 2018

Я использую «реагировать-вега» и «реагировать-rooltip».Работает нормально.Он получает правильные данные и отображает их во всплывающей подсказке.Но как я могу получить данные о событии клика?Я пытался добавить сигналы к спецификации, но они не работали.

Вот демоверсия с простой диаграммой Вега: https://codesandbox.io/s/w2lq37v7ll

Что мне нужно изменить, чтобы добавить прослушиватель событий для события щелчка.

То, что я хочу, это получитьте же данные, что и во всплывающей подсказке, когда пользователь нажимает на любой объект на графике Вега.

1 Ответ

0 голосов
/ 12 января 2019

Ниже код записывает данные о форме страны, по которой вы щелкнули, в консоль браузера.

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

Чтобы прослушать события, все помеченные элементы (тип символа, тип фигуры в вашем коде) на графике измените {"events": "shape:click", ... на "events": "*:click", ...}

Примечание. Также можно использовать, Просмотр 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
    }
  }
}
...