Автор оригинала: FreeCodeCamp Community Member.
D3.js Является самая популярная библиотека JavaScript для создания визуальных представлений ваших данных. Тем не менее, это немного сложно учиться, поэтому я думаю, что важно начать тихо.
В этом руководстве вы узнаете, как создать свою самую первую гистограмму с D3. Это даст вам введение в самые важные концепции, пока все еще весело зрят что-то.
Мы также создали бесплатный курс D3.js на Scrimba. Проверьте это здесь.
Теперь давайте начнем.
Настройка
Мы будем использовать возможную простейшую возможную настройку, просто импортируя библиотеку D3 с CDN.
Мы напишем наш код D3 в теге сценария. Во-вторых, мы добавили элемент до DOM. Если вы хотите играть с кодом, как вы прочитаете этот учебник, проверьте Эта площадка Scrimba , который содержит окончательную версию кода.
Первое, что мы собираемся сделать, это выбрать этот элемент и стиль его немного.
var svgWidth = 500;
var svgHeight = 300;
var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight)
.attr("class", "bar-chart");
Мы даем ей ширину и высоту, а также .bar-chart учебный класс. В наших CSS мы создали такое класс:
.bar-chart {
background-color: #C7D9D9;
}
Вот результат:
Теперь у нас есть хороший контейнер SVG, где мы можем нарисовать нашу гистограмму. Код для этого – это немного сложный, поэтому давайте сначала посмотрим на всю вещь, а затем пройтись по каждому шагу:
var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var barPadding = 5;
var barWidth = (svgWidth / dataset.length);
var barChart = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y", function(d) {
return svgHeight - d
})
.attr("height", function(d) {
return d;
})
.attr("width", barWidth - barPadding)
.attr("transform", function (d, i) {
var translate = [barWidth * i, 0];
return "translate("+ translate +")";
});
выбрать все()
Первое, что мы можем показаться немного странным, мы делаем .selectall ("rect") Однако, однако, мы еще не создали ни одного Enter (). Добавить () Отказ
Это может показаться немного запутанным. Но объясняя, как Selectall () Работает в сочетании с Enter (). Добавить () находится за пределами объема этого учебника. Если вы хотите понять это правильно, прочитайте Эта статья очень осторожно.
данные()
Затем мы цепляем Данные () Способ и пройти в нашем наборе данных. Данные в конечном итоге диктуют высоту каждого бара.
войти()
Следующим шагом является цепь Enter () метод. Enter () выглядит как в наборе данных, который вы передали в Данные () и По выбору мы сделали с Selectall ('rect') И тогда он пытается искать «матчи». Таким образом, он создает отображение между вашими данными и домом.
Но помните, Selectall ('rect') Метод вернул Пустой Выбор, как нет
Enter () Метод затем позволяет создавать новый
Приложение ()
На следующей строке мы добавляем Enter () , он фактически будет выполнен в девять раз, по одному для каждой точки данных, у которого не хватает соответствующего
attr ()
Следующим шагом является решить форму каждого из прямоугольников (наших баров). Нам нужно дать ему четыре атрибута: Высота, ширина, X-Pose и Y-позиция Отказ Мы будем использовать attr () Метод для всех этих.
Начнем с Y-позиции:
.attr("y", function(d) {
return svgHeight - d
})
Первый параметр диктует, какой атрибут мы хотим добавить: в этом случае Y-координату бара. Во-вторых, мы получаем доступ к функции обратного вызова, в которой мы собираемся вернуть значение, которое мы хотим иметь наш атрибут.
Здесь мы получаем доступ к точке данных на этом этапе процесса итерации (помните, этот метод вызывается один раз за пункт в CORMESET Array). Точка данных хранится в D аргумент Затем мы вычитаем данную точку данных, D , от высоты нашего контейнера SVG.
X и Y-координаты всегда рассчитываются начиная с верхнего левого угла. Поэтому, когда мы вычитаем высоту контейнера с D Значение, мы получаем Y-координату для верхней части бара.
Чтобы сделать бар натянуть из этой точки и до нижней части контейнера SVG, нам нужно будет дать ему высоту, эквивалентной значению точки данных:
.attr("height", function(d) {
return d;
})
Следующий шаг – дать ему ширину:
.attr (“Ширина”, Barwidth – BarPadding)
Здесь мы просто проходим простым выражением, в отличие от функции обратного вызова, поскольку нам не нужен доступ к точке данных. Мы просто принимаем основу в Barwidth Переменная, которую мы создали дальше, что является общей шириной контейнера, деленной на количество баров. Для того, чтобы получить небольшой разрыв между каждым из баров, мы также вычтите заполнение, которое мы определили как 5.
Последний шаг – установить X-координаты. Это выражение немного сложнее:
.attr("transform", function (d, i) {
var xCoordinate = barWidth * i;
return "translate("+ xCoordinate +")";
});
Здесь мы в первую очередь используем второй параметр в обратном вызове, Я Отказ Это индекс данного элемента в массиве.
Чтобы установить координату для каждого из баров, мы просто умножим индекс с Barwidth Переменная. Затем мы вернем строковое значение, которое описывает преобразование для оси X, например «Перевести (100)» Отказ Это будет толкать бар на 100 пикселей вправо.
И так же, у вас есть ваша самая первая гистограмма в D3.js.
Если вы заинтересованы в обучении больше о D3.js, обязательно Проверьте наш бесплатный курс на Scrimba.
Спасибо за чтение! Меня зовут на Борген, я соучредитель Scrimba – Самый простой способ научиться кодировать. Вы должны проверить наш Отзывчивый веб-дизайн Bootcamp Если хотите научиться строить современный веб-сайт на профессиональном уровне.