问题标签 [observablehq]

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 投票
1 回答
299 浏览

d3.js - 如何修改 observablehq 可缩放旭日形并将其复制到本地机器并运行?

我想在我自己的机器上使用我自己的数据(最好使用 d3.csv)从https://observablehq.com/@d3/zoomable-sunburst制作可缩放的旭日形。所有可下载的版本都包含使用标准库的 require()('observablehq/flare')。复制 observablehq 版本(ctrl-c/-v)代码时,我根本无法让它运行,而且它看起来不像 atom 编辑器中的代码。

将所有代码从上面的页面复制到 - 不运行可下载的档案(例如来自 vizhub(https://vizhub.com/undefined/7fcc84f68758417a8a1f6076410e98ab)包含flare.json 和flare.csv,但使用stdlib observablehq 版本。

0 投票
1 回答
182 浏览

javascript - 如何在 Observable 笔记本上使用 svg.js

几天前我开始学习使用Observable 。

我可以通过使用 svg.js 版本 2.7.1

但是当我尝试使用 3.0.12 版本时,这不起作用。

错误是

当我尝试通过 url 加载时:

也有错误。

是否可以将svg.jsv3 与 Observable 一起使用?

请给一些建议。

0 投票
2 回答
545 浏览

object - Uncaught SyntaxError: missing ) 在使用 Object.assign 时在参数列表之后等待

我正在尝试使用Observable中的 D3 重现分组条形图。我正在使用 D3.v5 在 Chrome 上运行脚本。

在脚本中我有:

当我在 HTML 中运行它时,它显示以下错误:

Uncaught SyntaxError: missing ) 在参数列表之后

我在 Chrome 控制台上试了一下,效果很好。

HTML 文件内容:

成功后,数据应该是如下对象:

0 投票
2 回答
440 浏览

javascript - 嵌入应用程序时从 D3 Observable 中删除单元格

假设我将这个来自 D3 Observable 的视觉效果嵌入到我自己的应用程序中。我们可以通过下载 tarball 文件来嵌入这些:

在此处输入图像描述

但这会下载所有对在线运行笔记本有用但在应用程序中显示视觉对象时不再需要的单元格。我怎样才能删除这些细胞?

在此处输入图像描述

我可以跑:

...但必须有更好的方法。

0 投票
0 回答
892 浏览

typescript - 在 TypeScript 中从 URL 动态导入远程 ES 模块

我正在玩Observable 笔记本并喜欢它。现在我想在我的网络应用程序中嵌入一个笔记本。使用 vanilla Javascript 和 Javascript 模块效果很好:

当我尝试通过 TypeScript 中的远程 URL 导入模块时,出现编译错误:

我尝试使用 忽略编译时错误// @ts-ignore,但随后它们发生在运行时。我也在研究import-http Webpack 插件,但这似乎仍然不能解决编译时错误。

我完全理解这不是 Obervable 特有的,而是与 TypeScript 和/或 Webpack 更相关。然而,Observable 特有的替代方案也会受到赞赏。

所以,我的问题是:如何在 TypeScript 中动态导入远程/外部 ES 模块?这样我就可以重现类似的内容:

0 投票
0 回答
34 浏览

javascript - 如何让 D3 教程条形图工作?

我正在使用 D3 图表。我正在尝试将代码放在https://observablehq.com/@d3/bar-chart。我把它放在一个包含下面代码的 HTML 文件中。但是当我用 Chrome 打开它时,控制台告诉我在第 13 行出现错误“Uncaught SyntaxError: Unexpected identifier”,即:

我无法在这条线上发现错误。

HTML 代码:

我不确定我从 D3 构建代码的准确性如何。我在教程的某个地方遗漏了什么吗?而且我不明白为什么第 13 行出现错误。非常感谢您的帮助。

0 投票
1 回答
2697 浏览

javascript - d3.join() 输入调用而不是更新?

Date我试图通过将一个新对象传递给函数来使 D3 每秒更新一次 SVG 元素data(),然后join()更新页面。我实际上是在Observable笔记本中使用Promises.tick()的,但我认为下面的代码(完整源代码)是相关位的粗略近似。我的最终目标是制作一个时钟,但这里的代码是我遇到的问题的最小演示。

这段代码的问题是update函数 injoin()永远不会被调用——每次循环时enter都会调用该函数,这导致text每次都追加一个新函数。由于我有一个数据和一个元素,我希望join'supdate被调用,而不是enter。我知道data()( example ) 上的 key 函数对于确定发生了什么变化很重要,但我的理解是默认键是数组索引,这里应该始终为 0。无论如何,指定一个不同的键函数(从标识函数到返回一个常数)并没有帮助。

0 投票
0 回答
146 浏览

javascript - 这个颜色图例示例是否仅适用于 d3 v5?

尝试从以下位置复制代码:https ://observablehq.com/@d3/color-legend?collection=@d3/d3-scale以制作一个看起来非常漂亮的连续颜色图例。(没有尝试过https://d3-legend.susielu.com/但我不喜欢它的外观)。

我从示例代码中复制了图例函数和斜坡函数。我收到错误消息:

“ReferenceError:DOM 未定义”。

我正在使用 d3 v4。我不复制该d3 = require("d3@5")行,因为我在本地有 v4 的 d3 文件,当我尝试使用该行时,我得到ReferenceError: require is not defined.

我知道这条线只是在创建一个画布对象,但我在网上找不到任何关于参数对canvas函数意味着什么的信息。

我怀疑问题可能出DOM.canvas在 d3 v5 函数上,但即使是这样,在 v4 中也必须有一些等效的方法来做同样的事情。

0 投票
2 回答
1324 浏览

d3.js - 更改 D3 Observable 中轴/刻度上标签的字体大小和颜色(未附加文本)

我在D3 Observable上使用这个条形图。我需要更改轴/刻度上标签的字体大小和颜色。在之前的 D3 方法中,您可以简单地在 CSS 中执行此操作,例如:

但是 Observable 没有提供用于放置CSS的常用 HTML 文件。

如果您查看文件,似乎没有附加任何文本,尽管在检查元素中您可以看到标签确实是“文本”

我尝试在附加的 g 中添加样式:

但无济于事。

0 投票
0 回答
63 浏览

javascript - 获取可观察的笔记本元数据

我正在尝试构建一个“预览卡”来链接一个可观察的笔记本: - 预览图像 - 标题 - 描述

有没有可以用来做到这一点的api?我曾尝试使用https://api.observablehq.com/document/{user}/{notebook}@latest,但它受推荐人保护。

还尝试获取 html 并解析元标头,但只能通过no-cors.

此实现是一个静态网站,将直接链接到笔记本,因此解析页面的服务器不在桌面上。