Выбор значения null: в чем причина «selectAll (null)» в D3.js?

Я видел некоторые коды D3 с таким шаблоном для добавляемых элементов:

var circles = svg.selectAll(null) .data(data) .enter() .append("circle"); 

Я действительно не получаю этот fragment. Зачем выбирать null ?

То, как я понимаю D3, если вы добавляете круги, это должно быть:

 var circles = svg.selectAll("circle") .data(data) .enter() .append("circle"); 

Точно так же, если вы добавляете абзацы HTML, это должно быть:

 var circles = svg.selectAll("p") .data(data) .enter() .append("p"); 

То же самое касается classов: если один из них добавляет элементы с classом foo , он должен быть selectAll(".foo") .

Однако selectAll(null) действительно работает! Элементы добавляются.

Итак, в чем смысл этого null ? Что мне здесь не хватает?


Примечание: это вопрос с автоответчиком, который пытается обеспечить «канонические» вопросы и ответы по предмету, затронутому многими предыдущими вопросами и не объясняемому API. Большая часть приведенного ниже ответа приведена в примере, который я написал в вымершей документации StackOverflow .

ТЛ; др

objective использования selectAll(null) заключается в том, чтобы гарантировать, что выбор «ввести» всегда имеет все элементы, присутствующие в массиве данных.


Выбор «ввести»

Чтобы ответить на ваш вопрос, мы должны вкратце объяснить, что такое «ввод» в D3.js. Как вы, наверное, знаете, одной из основных особенностей D3 является возможность привязки данных к элементам DOM.

В D3.js, когда один связывает данные с элементами DOM, возможны три ситуации:

  1. Количество элементов и количество точек данных одинаковы;
  2. Есть больше элементов, чем точек данных;
  3. Есть больше точек данных, чем элементов;

В ситуации № 3 все точки данных без соответствующего элемента DOM относятся к выбору «ввести».

Таким образом, в D3.js «enter» выбирают выбор, который после объединения элементов в данные содержит все данные, которые не соответствуют ни одному элементу DOM. Если мы используем функцию append в «enter», D3 создаст новые элементы, привязанные к нам данные.

Это диаграмма Венна, объясняющая возможные ситуации относительно количества точек данных / количества элементов DOM:

введите описание изображения здесь

Связывание данных с уже существующими элементами DOM

Давайте раскроем ваш предложенный fragment для добавления кругов.

Эта…

 var circles = svg.selectAll("circle") .data(data) 

… связывает данные с выбором, содержащим все круги. В D3 lingo это выбор «обновления».

Затем, это …

 .enter() .append("circle"); 

… представляет собой «ввод», создавая круг для каждой точки данных, который не соответствует выбранному элементу.

Конечно, когда в выборе нет элемента (или данного classа), использование этого элемента (или этого classа) в методе selectAll будет работать по назначению. Таким образом, в вашем fragmentе, если в элементе svg нет элемента , selectAll("circle") можно использовать для добавления круга для каждой точки данных в массиве данных.

Вот простой пример. В нет

, и наш выбор «enter» будет содержать все элементы массива данных:

 var body = d3.select("body"); var data = ["red", "blue", "green"]; var p = body.selectAll("p") .data(data) .enter() .append("p") .text(d=> "I am a " + d + " paragraph!") .style("color", String) 
  
  • Почему моя система ждет Google Analytics?
  • Очистка localStorage в javascript?
  • Как изменить выбранный HTML-вариант с помощью JavaScript?
  • Настройка строки запроса с использованием запроса Fetch GET
  • Отправить маркер ERC20 с помощью web3
  • Безопасно ли публиковать Firebase apiKey?
  • Node async loop - как сделать этот код запущенным в последовательном порядке?
  • App.settings - Угловой способ?
  • Определение HTML-шаблона для добавления с помощью JQuery
  • Изменение тайм-аута по умолчанию для мокко
  • Получите все неединственные значения (то есть: дублировать / более одного вхождения) в массиве
  • Давайте будем гением компьютера.