“未捕获的ReferenceError:未定义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)的《网络交互式数据可视化》第二版

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

未捕获的ReferenceError:未定义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方法.这是可观察的方法.

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)
}

因此，在一个可观察的笔记本中，一个人可以做...

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.

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