D3.js — это мощная библиотека визуализации данных, которая позволяет создавать удивительные диаграммы — такие как пузырьковые диаграммы , линейные и гистограммы — всего за несколько строк кода.
Благодаря пониманию JavaScript новичком вы можете преобразовать свой массив или объект в красочный дисплей. Однако каждый новичок сначала пытается понять, как данные связаны с фактическими элементами в DOM. Это известно как «привязка данных» или «объединение данных». Это огромная сделка, потому что это первый шаг всего процесса!
Интуитивно понятно, что вы можете ожидать цикл for() , где вы перебираете все элементы в ваших данных и создаете элемент. Как это:
var data = [{x: 100, y: 100}, {x: 200, y: 200}, {x: 300, y: 300}] for(var i=0; i< data.length; i++){ svg.append("circle") .attr("cx", function(data) { return data[i].x; }) .attr("cy", function(data) { return data[i].y; }) .attr("r", 2.5); }
Но это не так, как это работает! На самом деле, циклы for() вообще не задействованы. Вместо этого вот блок кода, который будет охватывать функциональность выше:
var data = [{x: 100, y: 100}, {x: 200, y: 200}, {x: 300, y: 300}] svg.selectAll("circle") .data(data) .enter().append("circle") .attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }) .attr("r", 2.5);
Это добавит 3 черных круга на ваш холст SVG. Вау. Это потому, что D3 использует декларативный стиль программирования. Цикл for() неявно рассматривается в этом блоке кода.
Это требует некоторого привыкания, так что я собираюсь пройти построчный блок кода выше, чтобы вы могли точно понять, что происходит. Это та же идея, что и посадка огорода. Когда вы закончите чтение, вы сможете построить любую базовую визуализацию в 5-10 строк и начать работать со стилем (самая простая часть).
Если вы ищете более техническое объяснение этой концепции, посмотрите документацию D3 или руководство Скотта Мюррея по привязке данных .
Шаг 1: SVG / Земельный участок
Во-первых, вам нужно выбрать, где вы хотите нарисовать визуализацию данных. Это эквивалентно выбору участка, который вы хотите посадить:
>var svg = d3.select("body") .append("svg") .attr("width", '800px') .attr("height", '800px');
Это создает область земли размером 800 на 800 пикселей — тело, в которое вы можете добавлять свои элементы. Довольно просто.
Шаг 2: выбрать все / создание отверстий
Далее нам нужен оператор selectAll () для создания группы, которую мы позже будем заполнять элементами. Думайте об этом как о копании ям в вашем саду. D3 делает это так, что вы можете позже либо обновить, либо удалить весь набор элементов сразу. Вот пример:
svg.selectAll("circle")
Если вы ранее не добавляли круги, это будет работать просто отлично. Обратите внимание, что «круг» является базовой формой из спецификации SVG . Если вы ранее добавили круги, вы можете просто использовать класс здесь, например:
svg.selectAll(".circleClass")
Хорошо, это изображение немного вводит в заблуждение. В той части сада, которую вы планируете сажать, есть бесконечное количество ям. Не было отличного способа превратить это в изображение в разумном количестве места. Важной частью является то, что вы разграничиваете определенную область, в которой вы будете размещать элементы данных. Если вы хотите добавить «прямоугольные» элементы SVG, вы должны сделать это в другой части сада. На данный момент в коде неясно, сколько элементов вы фактически добавите. Давайте разберемся с этим!
Шаг 3: Данные / Семена
Это самая важная часть. Он определяет, какие данные будут использованы при визуализации. В JavaScript вы можете передавать эти данные в виде массива или объекта. На этом шаге вы «привязываете» свои данные к типу элемента DOM, который вы указали в selectAll() . После этого вы можете ссылаться на элементы в массиве или объекте, как вы всегда делаете в JavaScript. Мы вернемся к этому в пару шагов. В приведенном ниже примере в массиве есть три элемента, поэтому мы ожидаем, что три элемента будут добавлены в DOM, когда мы закончим:
var data = [{x: 100, y: 100}, {x: 200, y: 200}, {x: 300, y: 300}] svg.selectAll("circle") .data(data)
Это то же самое, что выбрать определенный тип семян для сада. Каждый тип семян имеет определенные характеристики и превратится в известный тип растения.
Шаг 4: введите / положите семена в лунки
Команда .enter() selectAll инструкцию selectAll с количеством элементов в массиве / объекте и определяет количество элементов, которые необходимо создать. У вас больше нет бесконечного участка земли! Количество лунок на вашем участке земли теперь соответствует количеству растений, которые вы хотите вырастить:
svg.selectAll("circle") .data(data) .enter()
В коде для этого примера теперь есть три отверстия и семена одного определенного типа в каждом из этих отверстий (например, помидоры). Это также определяет количество итераций, через которые ваш код будет проходить автоматически (снова 3).
Шаг 5: Добавить / Структура ваших растений
Команда .append () определяет, какие из базовых форм SVG вы будете использовать. Хотя у вас есть много опций для selectAll() , на этом шаге можно выбрать только семь фигур (или «g», но это более selectAll() ). selectAll() называет группу, append() называет фактическую форму:
svg.selectAll("circle") .data(data) .enter().append("circle")
Это похоже на структуру, которая дополняет ваше растение. Во что вы хотите вырастить ваше растение? Если вы хотите выращивать помидоры, вам понадобится башня. Различные формы и визуализации данных подходят для разных наборов данных.
Краткое объяснение о том, как получить доступ к данным
Хорошо, теперь вы добавили три элемента круга в DOM. Вы выбрали свой участок земли, выкопали ямы, посадили семена и обеспечили структуру для роста растений. Вот как выбрать атрибуты каждого круга:
.attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; })
Из спецификации круга мы знаем, что вы можете определить положение круга внутри холста SVG с помощью cx и cy . В обоих случаях мы используем function(d) для доступа к свойствам каждого элемента в исходном массиве. Поскольку вы использовали .enter() , вы знаете, что этот блок кода будет выполняться для каждого элемента в массиве, всего три раза.
Символ d обозначает каждый элемент в массиве, например, {x: 100, y: 100} . Если бы он сказал d,i , i был бы индексом 0 для первого элемента, 1 для второго элемента и так далее. И когда вы просите его вернуть dx , вы просто смотрите на свойство x каждого элемента и превращаете его в пиксели. Это будет 100 пикселей справа от источника в этом случае. Теперь вы просто используете обычный JavaScript! Вы можете использовать операторы if , вызовы функций и все остальное.
Вывод
Прежде чем вы сможете создать что-нибудь классное с D3, вам нужно понять его конкретный метод превращения данных в элементы DOM по вашему выбору. Стилизация очень проста по сравнению с частью данных. Добавление текста очень похоже на добавление фигур, поэтому, когда вы понимаете часть данных, вы понимаете и текст.
Хотя вы, возможно, и ругаете создателей D3 за добавление такой сложной концепции в самом начале процесса обучения, у них была веская причина сделать это таким образом. D3 — это гибкая библиотека, которая может решать многие задачи практически автоматически. Эта структура привязки данных позволит вам выполнять сложные действия всего за одну-две строки кода. Теперь иди и «вау» ваших пользователей!
Примечание редактора: есть также интерактивная версия этой статьи.