D3.js: Различия между select ( "body" ). SelectAll ( "p" ) и selectAll ( "p" )?

Кто-нибудь знает, в чем разница?

Я понимаю, что оба будут возвращать одинаковые выборы.

Однако, когда я делаю append, если я использую selectAll ( "p" ), он не работает.

Например, это работает:

var foo = d3.select("body").selectAll("p")
    .data([1,2,3,4])

foo.enter.append("p")

Пока это не работает:

var foo = d3.selectAll("p")
    .data([1,2,3,4])

foo.enter.append("p")

Почему последнее не работает?

Ответы

Ответ 1

Короткий ответ здесь: "Потому что ничего не добавить". Хотя вы правы, что d3.selectAll("p") и d3.select("body").selectAll("p") будут выбирать одни и те же существующие узлы, выбор элемента body сначала устанавливает контекст для новых узлов, добавленных с помощью метода .append().

Без выбора body у вас нет точки в дереве DOM для вставки ваших узлов - я предполагаю, что d3 пытается добавить новые узлы к объекту document, что приводит к HIERARCHY_REQUEST_ERROR здесь.