程序员经验分享-hwhale

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

2024-04-08

我似乎无法通过阅读文档来弄清楚这一点。 有没有办法实现onClick我的任何标记的事件处理程序？


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

<!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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vegalite

在 vega-lite 中实现自定义点击处理程序的正确方法是什么 的相关文章

  • 如何使用 Vega-Lite 在轴上绘制多个变量？

    按照 Vega Lite 的西雅图天气教程 很容易绘制出每月的平均最低气温 schema https vega github io schema vega lite v2 json data url https vega github io

  • 如何向我的 vega-lite 图表添加辅助 Y 轴？

    这个问题展示了一种将多个时间序列添加到 vega lite 图表的方法 如何使用 Vega Lite 在轴上绘制多个变量 有没有办法将第二个系列放在辅助 Y 轴上 我说的是在右侧放置另一个 Y 轴 以便时间序列可以具有不同的尺度 但仍然可以

  • 尽管已安装模块，导入语句仍会使角度应用程序崩溃

    可能是什么原因import如果语法正确并且库已经安装 语句会导致错误 附图 可能是下面两个主要设置文件中的某些内容 包 json tsconfig json 我们继承了一个大型的 Angular 应用程序 并在其中安装了vega vega

  • Python Altair 生成选择表

    我有一个包含一堆分箱数据的直方图 我想知道如果我从直方图中选择一个条形 是否可以生成一个表格 并且它会显示原始数据框中的数据 您可以使用以下命令创建表格的外观mark text 这是基于文档中此页面的示例 import altair as

  • 将图例添加到 Altair 图表中的折线图和条形图，而不使用尺寸/颜色

    我正在使用 Altair 创建一个包含多条线的图表 每条线都有多个波段 代表不同的 CI 并且我正在努力了解如何添加图例 例如 在这个相当简单的示例中 import altair as alt import pandas as pd df

  • Altair：更改滑块的位置

    是否可以更改滑块选择绑定的位置 在 Altair 文档或 vega lite 文档中找不到某些内容 https vega github io vega lite docs bind html 我想将年份滑块向上移动 靠近主散点图 https

  • 使用 Vega Lite 显示已经聚合的数据

    我正在尝试显示随时间变化的总和的堆积条形图 数据看起来像这样 date 12345 sumA 100 sumB 150 我将 x 轴编码为 日期 字段 我需要将日期 12345 的条形图堆叠起来 其中一部分高 100 另一部分高 以另一种颜

  • Altair 中的平行坐标

    我想做一个具有多个 y 轴的平行坐标图 我已经找到了如何在 Vega Lite 中做到这一点here但我还没有找到使用 Altair 的方法 只有一个非常简单的例子其中所有 y 轴都相同 有什么办法吗这个情节在牵牛星 请注意 这种图表不是

  • 基于选择动态改变编码中的 Y 轴字段 Vega-Lite

    如何根据选择动态更改为 y 轴编码的数据字段 我正在尝试构建一个可视化来显示一天 24 小时内的事件计数数据 并且我希望用户能够选择不同的时区 例如 EST CST MST 或 PST 为此 我构建了一个单一选择 在其中指定上面括号中列出的

  • 我们可以将事件侦听器添加到“Vega-Lite”规范吗？

    我是 Vega 和 Vega Lite 的新手 我正在使用 Vega Lite 创建一个简单的条形图 但我无法添加任何事件侦听器 例如 徘徊 我想将鼠标悬停在一个栏上并更改该栏的颜色 如果您正在使用Vega嵌入 https github c

  • Altair 结合多个数据集

    我最近才知道Vega Vega Lite and Altair并将其视为最佳 Python 绘图工具的真正竞争者 我目前正在努力解决的问题是将两个数据帧中的信息绘制到共享一个或两个轴的同一个图表中 我尝试过类似的事情 plot1 alt C

  • Vega-lite：轴中标签的换行或自动换行

    我试图将 x 轴的标签包裹在下一行 因为标签长度很长 那么有没有什么办法可以实现呢 我尝试使用calculate and labelExpr通过破坏标签字符串 然后使用 n 连接它们 但这似乎不起作用 是否有任何其他配置可以帮助我实现此用例

  • Altair Ridgeline 不会创建具有名义组的绘图

    我尝试在 Altair 中创建山脊线图 假设我的数据框由 str 和 float 列组成 a object b float64 dtype object 具有像这样的值 a b 0 25 2303 0 1 29 2676 0 2 18 29

  • 在 Vega Lite 中使用数据作为数组而不是表

    如何在 VegaLite 中使用数组数据 我想将数据用作数组 dates 1 2 3 prices1 1 2 1 prices2 1 5 1 2 而不是 VegaLite 中传统使用的表数据 date 1 price 1 symbol 1

  • Vega-Lite：数据中的描边颜色值？

    在 Vega 中 可以从数据中获取颜色值 如下所示 维加的例子 https vega github io editor url vega N4KABGBEAkDODGALApgWwIaQFxUQFzwAdYsB6UgN2QHN0A6agSz

  • Vega-Lite 中的平行坐标？

    是否可以创建平行坐标维加精简版 https vega github io vega lite 我正在寻找一个简单但功能强大的 JavaScript 绘图库 并且需要支持平行坐标 I have googled https www google

  • React-Vega 和 React-Vega 工具提示

    我在用着react vega lite 官方给出的例子 https vega github io vega lite https vega github io vega lite https vega github io react veg

  • Vega-lite 线标记在远处显示工具提示

    我在 VegaLite 中有以下图表 在 Vega 编辑器中打开 https vega github io editor url vega lite N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEt

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

    我似乎无法通过阅读文档来弄清楚这一点 有没有办法实现onClick我的任何标记的事件处理程序 由于 Vega Lite 尚不支持信号 您可以修补生成的 Vega 您可以将信号添加到已编译的 Vega 规范中 然后通过 Vega 视图 API

  • vega-lite：单个图表中的多个标记

    我目前正在评估应该使用哪种类型的 js 图表引擎来制作开箱即用的图表 而 vega lite 因其非常简单和灵活而脱颖而出 但是 我想知道是否可以在单个图表中包含多种类型的标记 例如 我可能有一个很长的每月时间序列 我可能会考虑使用具有逐月

随机推荐

  • Pandas 忽略 NaN 删除重复项

    在 Pandas df 中 我尝试删除多个列中的重复项 每行有很多数据NaN 这只是一个例子 数据是一个混合包 因此存在许多不同的组合 df drop duplicates IDnum name formNumber 1 NaN AP GR

  • 使用 URL 启动应用程序

    我读过有关 android 中的意图的内容 但这是我的问题 我想通过点击网络浏览器中的链接来启动我的 Android 手机上的应用程序 例子 如果链接是 mycam http camcorder com http camcorder com

  • 如何在JQuery中选择除单击元素之外的所有类？

    我有一个在 Drupal 上开发的网站 我使用一个名为 collapsiblock 的模块 它基本上是一个 JQuery 插件 来实现类似手风琴的效果 它对我来说工作得很好 尽管它还处于测试阶段 但我想修改它 以便当用户单击手风琴的一项时

  • 点击列表视图项目上的手势

    我试图在点击列表视图中的项目后打开另一个视图 我尝试过添加一个TapGestureRegonizer甚至添加ViewCell与网格等 这些似乎都不起作用 我在标签中添加了点击手势 这似乎有效 但对于列表视图项目却不起作用 对于列表视图之类的

  • Rails：按两列之和排序

    所以 我有一个Photo模型可以在以下网址下载full size and presentation size 当用户下载照片时 我会在照片的full downloads and presentation downloads属性 这一切都很好

  • Android：如何从资源文件创建文件对象？

    我的资产文件夹中有一个文本文件 我需要将其转换为文件对象 而不是输入流 当我尝试这个时 我得到 没有这样的文件 异常 String path file android asset datafile txt URL url new URL p

  • Application Insights 遥测筛选不起作用

    我已经按照指南操作了here https learn microsoft com en us azure application insights app insights api filtering sampling filtering

  • Signtool 无法使用时间戳对 SHA2 和 SHA1 进行双重签名

    我们需要使用signtool exe使用SHA1和SHA2对我们的二进制文件进行双重签名 我们的证书支持256位SHA2 使用Windows 8 SDK的signtool e g Signtool exe 签名 as fd sha256 t

  • 如何在 R 中对交集/组索引的结果重新编号？

    我在 R 中对交集 组索引的重新编号结果苦苦挣扎了几天 示例数据框如下所示 t lt data frame mid c 102 102 102 102 102 102 102 103 103 103 103 103 103 103 aid

  • __init__() 内部和外部变量之间的差异（类和实例属性）

    除了名称之外 这些类之间还有什么区别吗 class WithClass def init self self value Bob def my func self print self value class WithoutClass va

  • Delphi 属性真实世界示例在哪里？

    我知道通过TMS奥勒留 http www tmssoftware com site aurelius asp例如 我们可以使用 新 2010 属性功能在运行时将数据库表字段序列化为对象属性 而我不是这种深层面向对象模式的专家 因此我研究了

  • 只要有待处理的取消屏蔽任务留下但不再存在，我如何运行 asyncio 循环？

    我正在尝试向现有的 asyncio 循环添加一些代码 以提供 Ctrl C 上的干净关闭 下面是它正在做的事情的抽象 import asyncio signal async def task1 print Starting simulate

  • 如何获得没有周末的 DateTime.DaysInMonth ？

    如何在 C 中获取一个月中没有星期五和星期六的天数 强制 LINQ 解决方案 int days Enumerable Range 1 DateTime DaysInMonth year month Select day gt new Dat

  • 如何不在uinavigationcontroller中调用viewdidload？

    我正在寻找针对我的情况的解决方案 我的应用程序如下 VC1 上有一个文本字段和按钮 用户键入名称 然后单击一个按钮 该按钮打开VC2 用户在 VC2 中提供附加信息 然后按 保存 我使用 segue 返回 VC1 并将这些附加信息作为字符串

  • 如何将 Istanbul Code Coverage 与转译的 Typescript 结合使用？

    我整个早上都在阅读有关此问题的文章 试图正确设置我的环境 但由于某种原因我不明白 我的设置 app source mixed js and ts scripts copied source js typescripts js transpi

  • 为什么我的 Azure Function 功能密钥不断重新生成？

    我有六种不同的 Azure 函数 每天会被调用数百次 不过 其中一个与其他任何一个实际上没有什么不同 开发了一项新的 功能 每隔几天 它就会更改功能键 该功能密钥用于对功能进行身份验证 因此每当它发生变化时就会中断我们的流程 原始密钥 以及

  • 如何使用 C# 从 FTP 服务器获取一系列文件

    我陷入了这样一个境地 我将通配符参数与 FtpWebRequest 对象一起使用 很糟糕 FtpWebRequest reqFTP FtpWebRequest FtpWebRequest Create new Uri ftp ftpServ

  • 方程解析库 C++ [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • 如何进行 git rebase 并保留提交时间戳？

    我想进行变基以从我的历史记录中删除某个提交 我知道该怎么做 但是 如果我这样做 提交时间戳将设置为我完成变基的那一刻 我希望提交保留时间戳 我在这里看到了最后一个答案 https stackoverflow com a 19522951 3

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

    我似乎无法通过阅读文档来弄清楚这一点 有没有办法实现onClick我的任何标记的事件处理程序 由于 Vega Lite 尚不支持信号 您可以修补生成的 Vega 您可以将信号添加到已编译的 Vega 规范中 然后通过 Vega 视图 API

热门标签