我在玩Observable 笔记本并喜欢它。现在我想在我的网络应用程序中嵌入一个笔记本。使用 vanilla Javascript 和 Javascript 模块效果很好：
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "https://api.observablehq.com/d/d64beea6bedb0375.js?v=3";
new Runtime().module(notebook, Inspector.into(document.body));
</script>
当我尝试通过 TypeScript 中的远程 URL 导入模块时，出现编译错误：
// error: Cannot find module 'https://api.observablehq.com/d/d64beea6bedb0375.js?v=3'
import notebook from 'https://api.observablehq.com/d/d64beea6bedb0375.js?v=3';
我尝试使用 忽略编译时错误// @ts-ignore，但它们在运行时发生。我也在研究import-http Webpack 插件，但这似乎仍然无法解决编译时错误。
我完全理解这并非特定于 Obervable，而是与 TypeScript 和/或 Webpack 更相关。然而，特定于 Observable 的替代品也将受到赞赏。
所以，我的问题是：如何在 TypeScript 中动态导入远程/外部 ES 模块？这样我就可以重现类似的东西：
// url = 'https://api.observablehq.com/d/d64beea6bedb0375.js?v=3';
public async foo(url: string): Promise<void> {
const notebook = await import(url);
const runtime = …https://observablehq.com/@d3/force-directed-lattice?collection=@d3/d3-drag
有一条线
invalidation.then(() => simulation.stop());
这个无效是什么？通过console.log，这是一个承诺，但我没有在任何地方看到它的定义。
我理解这行 D3 代码，它将 SVG 元素添加到 HTML 页面的正文，并将对新元素的引用存储在变量“svg”中：
var svg = d3.select('body').append('svg').attr('width', 500).attr('height', 50);
例如，它在 Scott Murray 的“Web 交互式数据可视化”一书中使用，这里是第 2 版。最近我看到了这种模式：
const svg = d3.select(DOM.svg(500, 50));
我想弄清楚这一行的作用，但是当我将它包含在我的脚本中时，我收到了控制台错误
未捕获的 ReferenceError：DOM 未定义
我错过了什么？我已经通读了 Scott Murray 的书和 D3 选择文档（这里），但我找不到 DOM.svg 的内容。（谷歌也没有多大帮助。）
我正在开发使用 D3.js 来显示一些可视化的应用程序。如何在 GitHub 上显示 HTML 文件（使用 JS）的预览？我需要每个提交（历史）的演示，而不仅仅是最新版本。
我使用捆绑的 JSON 数据和来自 CDN 的链接 D3.js 库将应用程序的静态版本生成为 HTML+JS，因此我只需要提供 HTML+JS 服务。没有后端。
我的第一个想法是使用 GitHub Pages （这是流行的答案#1、#2）。这很好，但是这样我就可以仅显示最新版本的演示（如果我为分支docs上的目录设置 gh-pages，则为最新提交master）或仅针对一个特定版本（如果我为gh-pages分支设置 gh-pages 并向其推送某个版本） ）。
我需要为存储库中的所有提交显示演示（预览 HTML）。我希望能够看到以前版本的应用程序的演示（预览以前的提交）。
我可以制作运行 D3.js 应用程序的屏幕截图，并将图像附加到存储库并在README.md. 当有人打开以前的提交时，他会看到应用程序的以前版本。这就是我要的。
但对于静态图像，我失去了 D3.js 的优势。我的应用程序是动态的（您可以缩放、单击图表、选择要显示的数据、显示工具提示等）。
我发现（#1，#2）服务可以直接从 GitHub 提供 HTML 文件：
有了这个，我可以链接到特定文件（甚至是特定版本的文件！就是这样！）并通过 HTMLPreview/RawGit 代理来显示预览。
但我对此有两个问题：
1. RawGit 的作者说我不应该使用这个工具来创建公共演示（我只是想做！）：
不要在示例代码或公共演示中使用开发 URL，因为人们经常复制并粘贴该代码并在生产应用程序中使用它，而没有意识到他们需要更改 URL。然后他们向 RawGit …
我可以在本地机器上运行Observable吗？
我在官方网站上没有找到安装说明。
这是https://github.com/observablehq/notebook-runtime存储库是运行本地服务器的核心吗？
D3js 解决方案的主要来源是observableHq.com，但似乎不可能（？）通过复制/粘贴来重用算法......是吗？即使检查教程这样，有没有简单的方法（用更少的插件或程序员的时间单耗！）检查和重用。
示例：我需要一个新的 2020 D3js v5算法来进行缩进树可视化，并且有一个很好的解决方案：observableHq.com/@d3/indented-tree。
下载没有用，因为它基于复杂的 运行时类......
但是，似乎是一个简单的图表生成器算法，
![谷歌](https://www.google.com/search?safe=active&q="DOM.svg"&oq="DOM.svg"){kind=link}
chart = { // the indented-tree algorithm
const nodes = root.descendants();
const svg = d3.create("svg")// ...
// ...
return svg.node();
}
我可以通过简单的人工逐步将其转换为简单的 HTML，没有复杂的改编，开始<script src="https://d3js.org/d3.v5.min.js"></script>和结束都没有使用Runtime 类吗？
想象我对引用的缩进树算法的逐步说明，我无法完成并需要您的帮助：
假设从一个干净的 HTML5 模板开始。例如：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Indented Tree</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
function onLOAD() {
console.log("Hello onLoad!")
// all copy-paste and adaptations …我可以使用此代码创建一个输入文本框。在同一行添加标签，同时仍将其绑定到同一个全局变量的最佳方法是什么？
viewof myText = html`<input type="text" value="initial value">
我想
viewof myText = html`Enter something: <input type="text" value="initial value">
但 myText 不绑定到输入字段。
我试图通过将新Date对象传递给data()函数，然后join()更新页面，使 D3 每秒更新一次 SVG 元素。我实际上是在一个Observable笔记本中使用的，Promises.tick()但我认为下面的代码（完整源代码）是相关位的粗略近似。我的最终目标是制作一个时钟，但这里的代码是我遇到的问题的最小演示。
这段代码的问题在于从未调用过updatein 函数join()——每次循环时enter都会调用该函数，这会导致text每次都追加一个新的函数。由于我有一个数据和一个元素，我希望join'supdate被调用，而不是enter. 我知道data()( example )上的 key 函数对于确定更改的内容很重要，但我的理解是默认键是数组索引，此处应始终为 0。无论如何，指定不同的键函数（从身份函数到返回常量）都没有帮助。
while (true) {
var data = [new Date()];
svg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.selectAll("text")
.data(data)
.join(
enter => enter.append("text").text(d => "enter: " + d),
update => update.text(d => "update: " + d) …我想要多个输入，例如Inputs.select折叠到笔记本中的手风琴菜单中observablehq。我设法使用自定义 html ( js/ css/ html) 创建一个手风琴菜单，但我很难在手风琴菜单中添加输入。这是observablehq带有手风琴菜单的笔记本。我希望将输入内容作为第 1 节/第 2 节的一部分。
observablehq ×9
d3.js ×5
javascript ×3
accordion ×1
code-reuse ×1
es6-modules ×1
github ×1
github-pages ×1
promise ×1
typescript ×1
webpack ×1