如何将 ObservableHq 简单算法解释为可重用的代码片段？
Pet*_*uss 5 code-reuse d3.js observablehq
D3js 解决方案的主要来源是observableHq.com，但似乎不可能（？）通过复制/粘贴来重用算法......是吗？即使检查教程这样，有没有简单的方法（用更少的插件或程序员的时间单耗！）检查和重用。
示例：我需要一个新的 2020 D3js v5算法来进行缩进树可视化，并且有一个很好的解决方案：observableHq.com/@d3/indented-tree。
下载没有用，因为它基于复杂的 运行时类......
但是，似乎是一个简单的图表生成器算法，
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 HERE.
console.log("!Bye!")
} // \onLOAD
</script>
</head>
<body onload="onLOAD()">
<script>
console.log("Hello!")
// global INITIALIZATIONS HERE.
</script>
</body>
</html>
准备全局变量，看来
root，nodeSize=17和width准备数据... JSON 数据很难看
./files/e6537420...，我用它的真名移到了项目的根目录flare-2.json。简单而经典的 D3js 读取 JSON 数据的方式：
d3.json("./flare-2.json").then( data=> console.log(data) );
必须测试和检查没有 CORS 错误等。准备数据作为
root变量。全部放入data => {}块以避免同步问题......
似乎root是基于function(d3,data) { let i = 0; return d3.hierarchy(data).eachBefore(d => d.index = i++); }.chart =上面引用的复制粘贴，在root用数据初始化之后。...
常问问题
评论问题和答案：
@Mehdi - 你能解释一下在代码中包含 D3 脚本标签和使用运行时库的问题吗？
当原始 ObservableHq 算法很简单时，我需要另一种方法，一种简单的方法来重用它，通过复制/粘贴和最少的调整。
@Mehdi - 您是否阅读了下载和嵌入笔记本教程？
是的，那里没有消息：没有关于如何重用代码的“人工指令”......只有“安装它”和“安装那个”。没有关于我上面解释的“复制/粘贴和最小改编”的说明。
(@nobody) - 你需要什么作为答案？
正如我上面展示的，一个简单的人类可读的逐步转换过程......理想情况下，最终结果可以通过测试，证明它可以在，例如，JSFiddle，复制/粘贴代码等等适应线以显示您的观点。
2020 年 11 月 编辑
Observable 现在有一个embed功能，详情见本页。
原帖
这是通过复制粘贴代码将链接的 observable 图表移植到自托管网页的分步过程，而无需使用observableruntime库。
从 HTML 页面和 HTML 页面中引用的 JavaScript 文件开始。假设 Web 服务器正在运行并配置为合适的。
- 获取数据。
- 如果您想使用自己的数据而不是笔记本中使用的数据，请将数据文件放在 Web 服务器上的目录中。
- 否则，使用
Download JSON每个data单元格菜单中的链接下载附加到笔记本的每个输入数据集。
- 使用加载页面中的每个数据集
d3-fetch
d3.json("/path/to/data.json").then(function(data) {
console.log(data); // [{"Hello": "world"}, …]
});
获取笔记本中包含变量或函数的每个单元格的内容，然后将其放入
.then上一步的函数中。此笔记本可视化工具有助于识别相关单元格。根据需要调整刚刚复制的函数的语法。例如，以下笔记本单元格：
root = { let i = 0; return d3.hierarchy(data).eachBefore(d => d.index = i++); }
可以转化为：
function getRoot(){
let i = 0;
return d3.hierarchy(data).eachBefore(d => d.index = i++);
}
root = getRoot()
如果笔记本中的某些功能需要，请定义一个变量
width，并使用所需的值对其进行初始化。调整 DOM 操作代码以便将元素附加到 DOM，而不是依赖于 observable 运行时的隐式执行。
下面截图中的演示：
d3.json("/path/to/data.json").then(function(data) {
console.log(data); // [{"Hello": "world"}, …]
});
root = { let i = 0; return d3.hierarchy(data).eachBefore(d => d.index = i++); }