“未捕获的引用错误:未定义 DOM" [英] "Uncaught ReferenceError: DOM is not defined"

问题描述

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

I understand this line of D3 code which adds an SVG element to the body of an HTML page, and stores a reference to the new element in the variable 'svg':

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

例如，在 Scott Murray 的《Web 交互式数据可视化》一书中使用，第二版 此处.最近我看到了这种模式:

It is used, for example, in Scott Murray's book Interactive Data Visualization for the Web, 2nd Edition here. More recently I've seen this pattern:

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

(例如在 这个例子 或 本教程).

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

I'd like to work out what this line does, but when I include it in my script I get the console error

未捕获的引用错误:未定义 DOM

Uncaught ReferenceError: DOM is not defined

我错过了什么?我已经通读了 Scott Murray 的书和​​ D3 选择文档(此处)，但我不能找到 DOM.svg 的东西.(Google 也没有多大帮助.)

What am I missing? I've read through the Scott Murray book and the D3 selection documentation (here) but I cannot find the DOM.svg stuff. (Google doesn't help much either.)

推荐答案

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

That's neither a standard Javascript object nor a D3 method. That's an Observable method.

如果您查看介绍，您会看到DOM 是函数的集合:

If you look at the introduction, you'll see that DOM is a collection of functions:

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 notebook 中，你可以做...

So, in an Observable notebook, one can do...

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

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

...to create a text node or, as you just found,

DOM.svg(500, 50)

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

...to create an SVG. However, that only works in an Observable notebook.

这篇关于“未捕获的引用错误:未定义 DOM"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！