Почему d3.select() возвращает массив массива?

Недавно я начал использовать d3.js для написания некоторых скриптов для управления SVG. Поэтому большую часть времени я ссылаюсь на документацию d3 и нахожу решение. Однако я не могу понять, почему функция d3.select возвращает массив массивов. Например, скажем, у меня есть элемент SVG, и если я делаю d3.select("svg"), он возвращает [[svg]], поэтому мне нужно сделать d3.select("svg")[0]. В документации указано

Один нюанс состоит в том, что выбор группируется: а не одномерный массив, каждый Выбор - это массив массивов элементов. Это сохраняет иерархическая структура подсегментов

Затем говорит, что мы можем игнорировать его большую часть времени.

Почему он возвращает массив массива?
Что делает

Это сохраняет иерархическую структуру подсегментов

означает?

Спасибо заранее.

Ответ 1

Вам не нужно знать или заботиться о возврате объекта d3.select. Все, что вам нужно знать, это какие методы доступны в этом объекте, о чем описывает документация.

Скажите, что у вас есть этот документ:

<div>
    <span>1</span>
    <span>2</span>
</div>
<div>
    <span>3</span>
    <span>4</span>
</div>

Если вы выберете все элементы <div> с помощью d3.selectAll

var div = d3.selectAll("div");

div - это объект выбора d3 размера 2, по одному для каждого элемента <div> в документе.

Но если теперь вы создадите подсегмент из этого объекта выделения

var span = div.selectAll("span");

выполняется поиск совпадающих элементов внутри каждого элемента в выборе div, и структура сохраняется, т.е. выбор span будет содержать то же количество элементов, что и выбор div, на котором он был основан on, и каждый из них будет состоять из набора элементов, найденных в этом элементе.

Итак, в этом случае span будет содержать два выбора (первый <div> и второй <div>), каждый из которых будет содержать два элемента (1 и 2 в первом, 3 и 4 во втором).

Что касается select, это то же самое, что и selectAll, за исключением того, что он останавливается после нахождения одного совпадения; его возврат структурирован точно таким же образом.

Демо