问题标签 [vega-embed]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
40 浏览

vega - 在 Vega 中以编程方式触发信号时 value 参数应该是什么样子?

在我的视图层之一中,我有

我正在使用vega-embed并添加了一个信号监听器。

这工作正常。但我也想从图表外部触发信号(不将其绑定到元素),就像View API docs 中解释的那样。

我尝试过类似的事情

但没有运气。打印出调试消息日志

意味着信号name正在被拾取,但不是它的value. 应该是什么格式value

0 投票
1 回答
44 浏览

npm - vega embed中的纱线构建失败

我已经克隆了我应该执行的 VegaEmbed 存储yarn,它通过以下输出成功:

然后,我应该执行yarn build失败并显示以下输出:

搜索错误消息的关键字不会显示有关如何解决此错误的任何有用说明。

当我搜索时,style.ts我的结果package.json如下:

部分有什么问题clean?有人可以帮我了解那里需要改变什么吗?

0 投票
0 回答
23 浏览

npm - vega embed中的纱线启动失败

我已经克隆了我应该执行的 VegaEmbed 存储yarn,然后yarn build(两者都成功)但yarn start失败并显示以下输出:

我需要做什么来解决这个问题?

0 投票
1 回答
205 浏览

angular - 安装后导入 vega-embed

我已经安装了vega& vega-lite&vega-embed使用npm,现在我正在按照此处的说明将图表嵌入到我自己的页面中(不像扩展程序那样在 vs-code 中显示它)。vega-embed

我在我的Angular 应用程序中编写了以下代码,它会引发错误:

vega.component.html

vega.component.ts

我将其中一个示例density-heatmaps.vg.json放在我的 Angularassets文件夹中,并希望在我的http://localhost:4200页面中显示它。

起初,我认为是导致错误的主要代码,但后来我意识到实际上是顶部的导入行导致我的应用程序崩溃......

有人可以帮我理解为什么 import 语句会导致应用程序崩溃以及如何修复它吗?

之后,我可以继续处理我的代码,并希望能够在我的html figure区域显示图形......

顺便说一句,我都尝试过import embed from 'vega-embed'import * as embed from 'vega-embed'但都使应用程序崩溃。我将不胜感激任何帮助。

ps这是我的检查控制台的屏幕截图:

在此处输入图像描述

我搜索allowSyntheticDefaultImports认为这是一个我可以设置为 true 以允许导入的标志,但我在应用程序中找不到任何东西......

我的配置文件的内容如下:

包.json

tsconfig.json

0 投票
1 回答
158 浏览

angular - 尽管安装了模块,导入语句还是使 Angular 应用程序崩溃

import如果语法正确并且库已经安装,那么语句会导致错误(附加图像)的原因可能是什么?它可能是下面两个主要设置文件(package.jsontsconfig.json)中的东西吗?

我们继承了一个大型 Angular 应用程序,并在其中安装了vega&&使用vega-lite,现在我们正在尝试将 vega 图嵌入到所服务的本地服务器网页中。vega-embednpm

主要文件内容如下:

包.json

tsconfig.json

vega.component.html

vega.component.ts

我们已经尝试了以下所有方法:

他们都使应用程序崩溃。

在此处输入图像描述

在此处输入图像描述

0 投票
1 回答
117 浏览

angular - 访问 vega 数据集的外部 url

我已经嵌入VegaVega-Lite我的 Angular 应用程序中,我可以直接在我自己的html页面上显示它们。

我采用的一些示例包含指向外部数据文件的链接,这些文件我已按照页面npm i vega-datasets上的说明下载并安装在我的应用程序中。

miserables.json以下是使用该文件的弧形图示例:

这 2 个实例"url": "../node_modules/vega-datasets/data/miserables.json"实际上曾经"url": "data/miserables.json"位于在线 Vega 编辑器中,但由于我已将内容复制到一个文件中并将其放置在我的 Angular 应用程序的assets文件夹中,因此我相应地修改了路径。

或者至少我认为它是相应地完成的!

图表没有显示,所以我怀疑我做错了路径调整。

有人可以帮我理解图表没有显示的我做错了什么吗?

这是我的 Angular 项目层次结构的屏幕截图:

在此处输入图像描述

数据集安装在node_modules/vega-datasets/data/我的文件夹中

0 投票
0 回答
19 浏览

vega-lite - 使用 Vega-Embed 时的过时版本警告

我在使用 Vega-Embed 时收到以下两个错误:

输入规范使用 Vega-Lite v5,但 Vega-Lite 的当前版本是 v5.1.1。

编译后的规范使用 Vega v5,但当前版本是 v5.21.0。

我的印象是,将版本设置为 v5 会自动使用最新版本。这是对实质内容的警告,还是只是误认?

0 投票
0 回答
128 浏览

vega - “未找到模块:错误:无法解析 './iterator.js'

我突然收到以下错误,我不知道如何解决它们:

构建应用程序时,我还会收到以下警告:

有人可以帮助我了解问题所在以及如何解决这些问题吗?

0 投票
1 回答
51 浏览

vega-lite - 用于 chloropeth map Vega-lite 的滑块

我正在尝试在 vega-lite 中为我的欧洲 chloropeth 地图添加一个滑块,以按年份过滤数据。我目前有一张地图,它只显示 2019 年的数据(颜色编码),我正在尝试制作一个滑块,以便我可以更改年份并查看颜色随时间的变化情况。

到目前为止,这是我的代码:

我已经能够使用随着我移动滑块而更新的相同数据制作条形图。{"filter": "datum.year==year"} 是使我的条形图能够做到这一点的原因,但是它在我的 chloropeth 地图上不起作用(我试图在两者的“转换”数组中添加它,我的条形图成功)。这是我的条形图的代码,以防万一。

我在做什么错?将不胜感激任何帮助!:)

谢谢

0 投票
0 回答
28 浏览

vega - VEGA 访问所有基准值

我正在尝试访问轴标签内的所有数据,以允许我根据数据值中显示的不同字段更改显示的文本。基准信号只能访问值/标签。

在数据值中,我有一个名为“hasTooltip”的字段,根据此标志,我想更改 Y 轴上显示的标签。

我正在使用具有视图功能的 VEGA 版本 5.20.0。

我想访问所有数据值的图像,而不仅仅是标签