8

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

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

例如，在 Scott Murray 的书 Interactive Data Visualization for the Web, 2nd Edition here中使用了它。最近我看到了这种模式：

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

（例如在本例或本教程中）。

我想弄清楚这一行的作用，但是当我将它包含在我的脚本中时，我得到了控制台错误

未捕获的 ReferenceError：未定义 DOM

我错过了什么？我已经阅读了 Scott Murray 的书和​​ D3 选择文档（这里），但我找不到 DOM.svg 的东西。（谷歌也没有多大帮助。）

4

2 回答 2

11

这既不是标准的 Javascript 对象，也不是 D3 方法。这是一个Observable 方法。

如果您查看介绍，您会看到这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)
}

因此，在 Observable 笔记本中，可以...

DOM.text("I am a text node.")

...创建一个文本节点，或者，正如您刚刚发现的，

DOM.svg(500, 50)

...创建一个 SVG。但是，这只适用于 Observable 笔记本。

于 2019-04-26T10:34:43.847 回答
4

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

于 2019-04-26T18:51:14.810 回答