«Uncaught ReferenceError: DOM не определен» d3.select (DOM.svg (500, 50))

Question

Я понимаю эту строку кода D3, которая добавляет элемент SVG в тело HTML-страницы и сохраняет ссылку на новый элемент в переменной 'svg':

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

ИспользуетсяНапример, в книге Скотта Мюррея «Интерактивная визуализация данных для Интернета», 2-е издание здесь .Совсем недавно я видел этот шаблон:

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

(например, в в этом примере или в этом уроке ).

Мне бы хотелосьчтобы понять, что делает эта строка, но когда я включаю ее в свой скрипт, я получаю консольную ошибку

Uncaught ReferenceError: DOM не определен

Чего мне не хватает?Я прочитал книгу Скотта Мюррея и документацию по выбору 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)
}

Итак, в записной книжке Observable можно сделать ...

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

... для создания текстового узла или, как вы только что нашли,

DOM.svg(500, 50)

.... создать SVG.Однако это работает только в записной книжке Observable.

Answer 2

Чтобы расширить предыдущий ответ, DOM действительно является частью стандартной библиотеки в Observable.Вы можете использовать его и остальные стандартные методы библиотеки вне Observable, экспортировав или внедрив блокнот, как описано на странице документации Загрузка и встраивание блокнотов .