Почему 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, за исключением того, что он останавливается после нахождения одного совпадения; его возврат структурирован точно таким же образом.

Демо