“未捕获的ReferenceError：未定义DOM”

Question

我了解这行D3代码，该行将SVG元素添加到HTML页面的正文中，并将对新元素的引用存储在变量'svg'中：

var svg = d3.select('body').append('svg').attr('width', 500).attr('height', 50);

它被使用，例如，在斯科特·默里的书交互式数据可视化的网络，第二版在这里。最近，我看到了这种模式：

const svg = d3.select(DOM.svg(500, 50));

（例如，在此示例或本教程中）。

我想弄清楚这行的作用，但是当我将其包含在脚本中时，出现控制台错误

未捕获的ReferenceError：未定义DOM

我想念什么？我已经阅读了Scott Murray的书和D3选择文档（在此处），但是找不到DOM.svg东西。（Google也没有太大帮助。）

Answer 1

那既不是标准的Javascript对象，也不是D3方法。那是一个可观察的方法。如果您看一下简介，您将看到它DOM是一个函数集合：Object {  canvas: ƒ(e, t)  context2d: ƒ(e, t, n)  download: ƒ(…)  element: ƒ(e, t)  input: ƒ(e)  range: ƒ(e, t, n)  select: ƒ(e)  svg: ƒ(e, t)  text: ƒ(e)  uid: ƒ(e)}因此，在一台可观察的笔记本中，一个人可以做...DOM.text("I am a text node.")...以创建文本节点，或者如您刚发现的，DOM.svg(500, 50)...创建SVG。但是，这仅在Observable笔记本中有效。

Answer 2

为了扩展先前的答案，DOM确实是Observable中标准库的一部分。您可以通过导出或嵌入笔记本来使用它以及Observable之外的其他标准库方法，如下载和嵌入笔记本文档页面中所述。