Ищете отличного (только удаленного) разработчика React? Посетите мой профиль в LinkedIn и поздоровайтесь! 😃

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Большая часть материала здесь взята из замечательного курса Lynda.com: D3.js Essential Training for Data Scientists, , который преподает великолепная Эмма Сондерс .

Честно говоря, я счел D3 очень запутанным вначале, потому что у меня не было доступа к краткому резюме, подобному приведенному ниже, которое я позже узнал на Lynda.com. Если эта информация вам поможет, пожалуйста, хлопните в ладоши. Это меня радует 😁.

let oddNums = [1, 3, 5, 7, 9]
let svg = d3.select('body').append('svg')
svg.selectAll('rect')
  .data(oddNums)
    .enter().append('rect')

svg.selectAll('rect') указывает браузеру найти элемент svg и поискать внутри него любые прямоугольники. Если он находит прямоугольники, он возвращает их в выделенном массиве элементов. Если ничего не найдено, возвращается пустой выбор, что и произойдет в этом случае.

.data(oddNums) связывает данные с выбором. Он делает это по порядку, поэтому, если бы браузер нашел три прямоугольника, он связал бы первый прямоугольник с номером 1, второй - с номером 3, третий - с 5 и т. д.

1, 3 и 5 используются, поскольку oddNums определен. Если бы браузер нашел только два прямоугольника, D3 поместил бы оставшиеся данные в так называемый enter выбор.

т.е. если браузер обнаружил два прямоугольника, этот код свяжет номер 1 с первым прямоугольником и номер 3 со вторым. Затем он определил бы, что у него есть числа: 5, 7 и 9, ожидающие прямоугольника, и поместил бы эти числа ( 5, 7, 9) в выбор enter.

В приведенном выше коде selectAll возвращает пустой выделенный фрагмент, поскольку внутри целевого svg нет прямоугольников. Это означает, что D3 решит, что все пять точек данных являются оставшимися или отсутствующими элементами, поэтому он добавляет все пять чисел к выбору enter.

Следующая строка - .enter().append('rect'). Обычно мы видим .enter(), за которым следует .append(), поэтому мы поместили их в одну строку кода. Это добавляет прямоугольник для каждого элемента в enter выборе. В нашем случае их было пять.

Но что, если исходная строка selectAll вернула шесть прямоугольников, но в нашем массиве данных по-прежнему было только пять элементов?

Затем D3 связывает первые пять прямоугольников с числами и помещает последний прямоугольник в exit выделение. Вместо .enter().append() можно было бы .exit().remove(). т.е. выбор enter будет пустым, и выполнение чего-либо после .append() не даст никакого эффекта, а выбор exit будет содержать последний прямоугольник, готовый к удалению.

D3 всегда стремится сбалансировать количество точек данных с количеством графических элементов.

Если точек данных больше, чем прямоугольников, D3 создаст прямоугольники. Если прямоугольников больше, чем точек данных, D3 поместит лишние прямоугольники в exit выделение, чтобы их можно было удалить.

Я очень надеюсь, что это поможет вам так же, как помогло мне. D3 концептуально сложен, и на то, чтобы осознать, нужно время. Не теряйте надежду и не чувствуйте себя идиотом - большинству людей это было трудно понять. Продолжайте настаивать и строить небольшие графики - постоянно увеличивая сложность того, что вы пытаетесь построить. В конце концов, ты получишь это. 😋