正文 

当前位置： 首页 > 问答 >

在 vega-lite 中实现自定义点击处理程序的正确方法是啥

     2023-02-16     58

关键词：

【中文标题】在 vega-lite 中实现自定义点击处理程序的正确方法是啥【英文标题】：What's the proper way to implement a custom click handler in vega-lite在 vega-lite 中实现自定义点击处理程序的正确方法是什么 【发布时间】：2020-01-02 13:43:47 【问题描述】：

我似乎无法通过阅读文档来解决这个问题。 有没有办法为我的任何标记实现onClick 事件处理程序？

【问题讨论】：

【参考方案1】：

我很难用 vega-lite 让补丁识别我想要点击事件的对象。所以相反，我只是添加了一个通用的 eventListener 

vegaEmbed('#vis', spec, 
).then(result => 
    result.view.addEventListener('click', function(event, item) 
       console.log('CLICK', event, item);
    );
).catch(console.warn);

项目对象包含数据。如果没有数据，您就知道点击不是在有用的位置。

https://vega.github.io/vega/docs/api/view/#view_addEventListener

【讨论】：

【参考方案2】：

由于 Vega-Lite 尚不支持信号，您可以修补生成的 Vega。您可以将信号添加到已编译的 Vega 规范，然后通过 Vega 视图 API 添加信号侦听器。您可以在 Vega-Embed 中使用 patch 选项修补生成的 Vega。

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@4"></script>
</head>

<body>  
  <div id="vis"></div>

  <script>
    const spec = 
      "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
      "data": 
        "values": [
          "a": "A", "b": 28,
          "a": "B", "b": 55,
          "a": "C", "b": 43,
          "a": "D", "b": 91,
          "a": "E", "b": 81,
          "a": "F", "b": 53,
          "a": "G", "b": 19,
          "a": "H", "b": 87,
          "a": "I", "b": 52
        ]
      ,
      "mark": "bar",
      "encoding": 
        "x": "field": "a", "type": "ordinal",
        "y": "field": "b", "type": "quantitative"
      
    ;
    vegaEmbed('#vis', spec, 
      patch: (spec) => 
        spec.signals.push(
            "name": "barClick",
            "value": 0,
            "on": ["events": "rect:mousedown", "update": "barClick + 1"]
        )
        return spec;
      
    ).then(result => 
        result.view.addSignalListener('barClick', console.log);
    ).catch(console.warn);
  </script>
</body>

【讨论】：

为了对此进行扩展，addSignalListener 回调 can be a function of the event name AND the underlying value。通过将"barClick +1" 替换为"datum" 作为update 键的值，我能够访问以编程方式单击的数据。见codepen.io/stephenshank/pen/XWJpPxo。 +dominik 当我用这个编译我的 cljs 代码时，当我尝试渲染图表时得到Error: Unrecognized signal name: "barClick"。

如何在canvas中实现自定义路径动画(代码片段)

在最近的项目中笔者需要做一个新需求：在canvas中实现自定义的路径动画。这里所谓的自定义路径不单单包括一条直线，也许是多条直线的运动组合，甚至还包含了贝塞尔曲线，因此，这个动画也许是下面这个样子的：那么如何... 查看详情

在spring boot中实现自定义错误

】在springboot中实现自定义错误【英文标题】：Implementthecustomerrorinspringboot【发布时间】：2019-04-0702:58:26【问题描述】：我想页面。在应用程序中，id是主键，所以当没有给出id时，它会将请求传输到页面，但我希望应用程序在索... 查看详情

如何在 iOS 应用程序中实现自定义（平面图图像）地图..？ [关闭]

】如何在iOS应用程序中实现自定义（平面图图像）地图..？[关闭]【英文标题】：HowdoIimplementacustom(floorplanimage)mapinaniOSapp..?[closed]【发布时间】：2012-03-0612:49:09【问题描述】：实现这一点的一些应用示例是..YorkdaleAppIconBrickell我是... 查看详情

如何在 iPhone 中实现自定义相机功能？ [关闭]

】如何在iPhone中实现自定义相机功能？[关闭]【英文标题】：HowtoimplementcustomcamerafunctionalityiniPhone?[closed]【发布时间】：2011-08-1605:07:13【问题描述】：我想开发一种功能，以便在iPhone应用程序中实现自定义相机功能，所以请给我... 查看详情

在 MVC 中实现自定义身份和 IPrincipal

】在MVC中实现自定义身份和IPrincipal【英文标题】：ImplementingaCustomIdentityandIPrincipalinMVC【发布时间】：2010-12-2510:29:21【问题描述】：我有一个基本的MVC2beta应用程序，我正在尝试实现自定义身份和主体类。我创建了实现IIdentity和IPr... 查看详情

如何在 WCF 服务中实现自定义身份验证

】如何在WCF服务中实现自定义身份验证【英文标题】：HowtoImplementcustomauthenticationinWCFservice【发布时间】：2019-12-1403:26:43【问题描述】：我想为具有自定义身份验证的移动应用程序创建WCFrestful服务。第一个请求应该是登录，特别... 查看详情

如何在 WordPress 中实现自定义标头的引导小部件代码？

】如何在WordPress中实现自定义标头的引导小部件代码？【英文标题】：HowtocanimplementbootstrapwidgetcodeforcustomheaderinWordPress?【发布时间】：2019-07-1703:22:25【问题描述】：我在网站上工作，我不是引导程序的专业人士。这是我的主题标... 查看详情

在 Django 中实现自定义模板标签时遇到问题

】在Django中实现自定义模板标签时遇到问题【英文标题】：HavingtroubleimplementingcustomtemplatetagsinDjango【发布时间】：2012-04-0101:23:15【问题描述】：我正在尝试在我的应用程序中实现一些自定义模板标签，并更好地构建它。烦人的部... 查看详情

在 Spring Security 2.06 中实现自定义 AuthenticationProvider

】在SpringSecurity2.06中实现自定义AuthenticationProvider【英文标题】：ImplementcustomAuthenticationProviderinSpringSecurity2.06【发布时间】：2012-01-2819:21:20【问题描述】：我正在使用SpringSecurity来保护Struts2Web应用程序。由于项目限制，我使用的... 查看详情

在具有条件的 keras 中实现自定义损失函数

】在具有条件的keras中实现自定义损失函数【英文标题】：Implementingcustomlossfunctioninkeraswithcondition【发布时间】：2018-12-0813:49:59【问题描述】：我需要一些有关keras损失函数的帮助。我一直在使用Tensorflow后端在keras上实现自定义损... 查看详情

如何在 webflux 中实现自定义身份验证管理器时对未经授权的请求响应自定义 json 正文

】如何在webflux中实现自定义身份验证管理器时对未经授权的请求响应自定义json正文【英文标题】：Howtoresponsecustomjsonbodyonunauthorizedrequestswhileimplementingcustomauthenticationmanagerinwebflux【发布时间】：2020-11-2703:52:15【问题描述】：我正... 查看详情

如何在黄瓜中实现自定义监听器？

】如何在黄瓜中实现自定义监听器？【英文标题】：Howtoimplementcustomlistenersincucumber?【发布时间】：2021-12-2214:55:47【问题描述】：如何在cucumber中实现客户监听？哪个可以记录到控制台/报告失败方法的发生？使用黄瓜4.0注意：钩... 查看详情

如何在 keras 中实现自定义指标？

】如何在keras中实现自定义指标？【英文标题】：howtoimplementcustommetricinkeras?【发布时间】：2016-10-0601:13:54【问题描述】：我得到这个错误：sum()得到了一个意外的关键字参数\'out\'当我运行这段代码时：importpandasaspd,numpyasnpimportkera... 查看详情

为啥不推荐使用 JScript 在 WiX 中实现自定义操作？

】为啥不推荐使用JScript在WiX中实现自定义操作？【英文标题】：WhyisusingJScriptforimplementingcustomactionsinWiXnotrecommended?为什么不推荐使用JScript在WiX中实现自定义操作？【发布时间】：2013-07-1008:19:33【问题描述】：在浏览有关WiX的文... 查看详情

在 Android 中实现自定义 ListView

】在Android中实现自定义ListView【英文标题】：ImplementacustomListViewinAndroid【发布时间】：2016-10-2802:16:18【问题描述】：我在我的MainActivity中创建了一个listView，并为行布局创建了另一个布局文件，如下所示：问题是，我该如何实现... 查看详情

如何在 QT 中实现自定义模型的 removeRow() 函数？

】如何在QT中实现自定义模型的removeRow()函数？【英文标题】：HowtoimplementremoveRow()functionforcustomizedmodelinQT?【发布时间】：2016-03-2404:02:48【问题描述】：我已经搜索了QT文档以供参考，但我有一些问题。这是QTdoc中的实现：boolTableMo... 查看详情

在 kvm 中实现自定义超级调用

】在kvm中实现自定义超级调用【英文标题】：Implementingacustomhypercallinkvm【发布时间】：2016-02-0900:28:27【问题描述】：我对虚拟化非常陌生，最近我一直在尝试熟悉VMM的操作方式以及如何进行超级调用。谈到我打算在安装在我的Ubu... 查看详情

在 SDK 中实现自定义取消按钮

】在SDK中实现自定义取消按钮【英文标题】：ImplementcustomCancelButtoninaSDK【发布时间】：2015-11-0917:24:08【问题描述】：我想用paysbuySDK实现支付功能....问题是它没有任何cancel选项，以便用户可以在支付成功后取消关闭操作。默认情... 查看详情