Научете се да създавате стълбовидна диаграма с D3 - Урок за начинаещи

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().append().

Това може да изглежда малко объркващо. Но обяснението как selectAll()работи в комбинация с enter().append()е извън обхвата на този урок. Ако искате да го разберете правилно, прочетете тази статия много внимателно.

данни()

След това веригираме data()метода и предаваме в нашия набор от данни. Данните в крайна сметка ще диктуват височината на всяка лента.

въведете ()

Следващата стъпка е да веригирате enter()метода. Най enter()изглежда по както на набора от данни, който сте подали в data()  и в подбора, което направихме с selectAll('rect'), а след това се опитва да търси "мачове." Така създава картографиране между вашите данни и DOM.

Но не забравяйте, че selectAll('rect')методът върна празна селекция, тъй като в DOM все още няма елементи. Наборът от данни обаче има девет елемента. Така че няма „съвпадения“.

След enter()това методът ви позволява да създадете нов елемент в DOM за всеки елемент от набора от данни, който все още няма съответния елемент.

добавяне ()

На следващия ред добавяме елемент за всеки от елементите. Както следва този метод след това enter(), той действително ще бъде изпълнен девет пъти, по един за всяка точка от данни, на която липсва съответстваща в DOM.

attr ()

Следващата стъпка е да се определи формата на всеки от правоъгълниците (нашите ленти). Трябва да му дадем четири атрибута: височина, ширина, х-позиция и у-позиция . Ще използваме 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 ("width", barWidth - barPadding)

Тук просто предаваме прост израз, за ​​разлика от функцията за обратно извикване, тъй като не се нуждаем от достъп до точката с данни. Просто вземаме основа в barWidthпроменливата, която създадохме по-нататък, която е общата ширина на контейнера, разделена на броя на лентите. За да получим малка разлика между всяка от лентите, ще извадим и подложка, която определихме като 5.

Последната стъпка е да зададете x-координатите. Този израз е малко по-сложен:

.attr("transform", function (d, i) { var xCoordinate = barWidth * i; return "translate("+ xCoordinate +")"; }); 

Тук ние преди всичко се възползваме от втори параметър в обратното обаждане i,. Това е индексът на дадения елемент в масива.

To set the coordinate for each of the bars, we’ll simply multiply the index with the barWidth variable. We’ll then return a string value which describes the transformation for the x-axis, for example "translate(100)". That would push the bar 100 pixels to the right.

And just like that, you have your very first bar chart in D3.js.

If you’re interested in learning more about D3.js, be sure to check out our free course on Scrimba.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.