“未捕获的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之外的其他标准库方法，如下载和嵌入笔记本文档页面中所述。