Научитесь создавать столбчатую диаграмму с помощью D3

1656640812 nauchites sozdavat stolbchatuyu diagrammu s pomoshhyu d3
8dC3-aSGvqDWCs-25l0ny4Un8uV7ujrgEEoG
Хотите правильно изучить D3? Просмотрите также наш бесплатный курс.

D3.js – самая популярная библиотека JavaScript для создания визуальных представлений ваших данных. Однако это немного сложно учиться, потому я считаю, что важно начинать тихо.

В этом учебнике вы узнаете, как создать свою первую гистограмму с помощью D3. Это даст вам вступление в самые важные концепции, одновременно весело создавая что-то.

Мы также создали бесплатный курс D3.js по Scrimba. Проверьте это здесь.

Теперь начнем.

Настройка

Мы используем самые простые настройки, просто импортируя библиотеку D3 из CDN.

<html>  
  <head>  
    <link rel="stylesheet" href="  
  </head>  
  <body>  
    <svg></svg>  
    <script src="  
    <script></script>  
  </body>  
</html>

Мы запишем наш код D3 в тег сценария. Во-вторых, мы добавили <svg> элемент к DOM. Если вы хотите поиграть с кодом во время чтения этого учебника, просмотрите эту игровую площадку Scrimba, содержащую окончательную версию кода.

Первое, что мы собираемся сделать это выбрать этот элемент и немного его стилизовать.

var svgWidth = 500;  
var svgHeight = 300;

var svg = d3.select('svg')  
    .attr("width", svgWidth)  
    .attr("height", svgHeight)  
    .attr("class", "bar-chart");

Мы придаем ему ширину и высоту плюс a .bar-chart класс. В нашем CSS мы оформили класс следующим образом:

.bar-chart {  
    background-color: #C7D9D9;  
}

Вот результат:

1*pe1Psj8v6GbOqP9tlGnJkQ

Теперь у нас хороший 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")однако мы еще не создали ни одного <rect> элементов еще. Следовательно, этот метод возвращает пустой выбор (пустой массив). Однако мы будем творить <rect> вскоре использовать элементы enter().append().

Это может показаться несколько запутанным. Но объясняя как selectAll() работает в комплексе с enter().append() выходит за рамки этого руководства. Если вы хотите правильно это понять, внимательно прочтите эту статью.

данные()

Затем мы цепочка data() метод и передать в наш набор данных. Данные в конечном счете будут диктовать высоту каждой полосы.

введите()

Следующим шагом является цепочка enter() метод. The enter() смотрите на набор данных, которые вы передали data() и на выбор, который мы сделали selectAll('rect'), а затем пытается найти «совпадения». Таким образом, он создает отображение между вашими данными и DOM.

Но помните, что selectAll('rect') метод вернул an пуст выделение, поскольку нет <rect> элементов в DOM. Однако набор данных содержит девять элементов. Так что «совпадений» нет.

The enter() затем позволяет создать новый <rect> в DOM для каждого элемента в наборе данных, который еще нет соответствующего <rect> элемент.

добавить()

В следующей строке мы добавляем a <rect> элемент для каждого элемента. Как этот метод следует после enter()фактически будет выполнено девять раз, по одному для каждой точки данных, которой не хватает соответствующего <rect> в DOM.

attr()

Следующим шагом будет определение формы каждого из прямоугольников (наших полос). Нам нужно предоставить ему четыре атрибута: высота, ширина, х-позиция и y-положение. Мы будем использовать attr() метод для всех этих.

Начнем с y-позиции:

.attr("y", function(d) {  
    return svgHeight - d  
})

Первый параметр указывает, какой атрибут мы хотим добавить: в этом случае это y координата полосы. Во втором мы получаем доступ к функции обратного вызова, в которой мы собираемся вернуть значение, которое мы хотим иметь для нашего атрибута.

Здесь мы получаем доступ к точке данных на этом шаге процесса итерации (помните, этот метод вызывается один раз для каждого элемента в dataset массив). Точка данных сохраняется в 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 +")";  
});

Здесь, прежде всего, мы используем второй параметр в обратном вызове, i. Это индекс данного элемента в массиве.

Чтобы установить координату для каждой из столбцов, мы просто умножим индекс на barWidth переменная. Затем мы вернем строчное значение, описывающее преобразование, например, для оси x "translate(100)". Это сдвинет полоску на 100 пикселей вправо.

И вот так у вас есть первая гистограмма в D3.js.

1*4gyftwYFlIenlKtILaiqbw

Если вам интересно узнать больше о D3.js, обязательно посмотрите наш бесплатный курс о Scrimba.

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba – самый простой способ научиться кодировать. Если вы хотите научиться создавать современный веб-сайт на профессиональном уровне, посетите наш курс по адаптивному веб-дизайну.

буткемп-баннер
Нажмите здесь, чтобы перейти к расширенному учебному лагерю.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *