npm包vega-event-selector使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是vega-event-selector

vega-event-selector是针对前端数据可视化框架vega（https://vega.github.io/vega/）开发的一个npm包，用于处理用户与数据可视化之间的互动，如鼠标交互、键盘事件等。

vega-event-selector的安装

安装命令：npm install vega-event-selector

vega-event-selector的使用步骤

引入vega-event-selector

在需要使用vega-event-selector的页面中，需要引入vega-event-selector包：

import {EventStream} from 'vega-event-selector';

编写事件处理函数

vega-event-selector会根据用户发出的事件（如鼠标点击、鼠标滚轮等）构建一个事件流（event stream），开发者需要编写事件处理函数来处理这个事件流。

事件处理函数的参数有两个：

event，表示当前接收到的事件；
item，表示当前处理的数据元素。

例如，我们可以编写一个点击数据元素时，打印出数据元素的名称的事件处理函数：

function myClickHandler(event, item) {
  if(item) {
    console.log(item.datum.name);
  }
}

创建EventStream对象

使用EventStream构造函数创建一个事件流。

EventStream构造函数的参数包括：

target，表示事件流的目标，可以是Vega数据视图的DOM元素或者一个选择器；
source，表示事件流的源头，可以是任意的DOM元素；
type，表示事件流的类型，比如'click'、'mouseover'等；
filter，表示辅助过滤器，可以过滤出符合特定条件的事件，例如只处理拖动（drag）事件或只处理鼠标左键点击事件。

例如，创建了一个点击数据视图中名字含有“张三”的数据元素时，执行myClickHandler事件处理函数的事件流：

const stream = new EventStream(view, 'view', 'click', [{
  type: 'project',
  field: 'name',
  has: '张三'
}]);

stream.attach(myClickHandler);

示例代码

-- -------------------- ---- -------
------ ------------- ---- ----------------------
------ ---- ---- --------------
------ ---- ---- -------------- 
------ --------------------- ---- -------------

----- ---- - ------------------------- -
  ------- -
    -- ----
    ----- ----- -- -
      ------ ----------
        ----------- -- -
          ------ -----------
        --
    -
  -
---------------- ------ --------

-------- --------------------- ----- -
  -------- -
    -----------------------------
  -
-

----- ------ - --- ----------------- ------- -------- --
  ----- ----------
  ------ -------
  ---- ----
----

------------------------------

指导意义

通过学习本文的vega-event-selector的使用教程，我们可以学习到数据可视化交互处理的基础知识，可以有效提升前端数据可视化开发的能力。同时，vega-event-selector的使用也可以使得我们开发的数据可视化应用更加丰富和智能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/171197