Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

javascript - "Uncaught ReferenceError: DOM is not defined"

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

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

(e.g. in this example or this tutorial).

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

Uncaught ReferenceError: DOM is not defined

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

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)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...