Визуализация на данни в JS
D3 (Управлявани от данни документи - Управление на данни в документи [осветено]). Позволява ви да "съживите" вашия проект, като използвате произволни данни, да ги комбинирате с HTML, CSS и SVG (мащабируема векторна графика - векторна графика), динамично манипулиране на DOM (модел на обект на документ - модел на обект на документ) елементи и да получите, например, линейна диаграма или всеки друг обект / картина. От реалното използване на D3 могат да се отбележат такива важни приложения като начертаване на графики, създаване на карта с помощта на координати и др.
Какво се разбира под данни? Данните са всяка информация, която потенциално съдържа някакво значение, както изрично, така и имплицитно, и прилагайки визуализация към данните при такава формулировка на въпроса, това значение може да бъде представено в доста визуална форма. В най-простата си форма можем да мислим за данните като масив от числа, които описват някакво значение, например един и същ вот под формата на линейна графика, колко са гласували за „добро“ и колко са гласували за „лошо“. На входа се получават данни (потребителят е избрал опция, тази опция е обработена), а на изхода виждаме дисплей за извършените действия - гласът е преброен, сумиран с предишни гласове и общата картина е представена под формата на графика.
Какво ни дава D3? Библиотеката ни дава всички необходими инструменти за обработка на данни и манипулиране на DOM (като jQuery, по-специално, изграждане на вериги от методи). Тези библиотеки са много сходни една с друга, тъй като имат вградени процедури за манипулиране на DOM, разпознават CSS селектори (избор на елементи) и са базирани на уеб стандарти, но все пак се различават една от друга по предназначение. jQuery - обвивка над стандартния JS, наличен във всеки браузър, обща библиотекадестинация, предназначена да улесни много операции, извършвани на обикновен JS, докато D3 е предназначен за манипулиране на данни (тяхната визуализация, филтриране, трансформация, генериране и т.н.), поддържа векторна графика и съдържа различни механизми за обвързване на данни към html документ.
Нека се упражняваме малко в рисуването на примитиви на векторна графика, като в същото време си спомняме (или разберем за кого как) как обикновено да описваме такива геометрични фигури като линии и кръгове, използвайки html маркиране. Нека начертаем, например, такава измислена графика с координатни оси и линия на 45 градуса, да наложим кръг върху тази графика, така че линията да минава през нея и да пресича наполовина:
Начертахме тези фигури и маркирахме параметрите им статично, но красотата е, че D3 ни позволява да правим всичко динамично в зависимост от данните - повтарям още веднъж, независимо дали става дума за рисуване на прости графики или просто спиращи дъха примери за визуализация.
Сега нека се опитаме да направим същата "фантастична" диаграма, но в динамика, използвайки D3 методи. Първо, нека свържем D3, както следва:
След това създайте елемент:
И напишете следния код:
След като анализирате този списък, можете да видите, че D3 работи почти по същия начин като jQuery. Първо, има селекция от елементи, ние избираме областта, където ще добавим нашите нови елементи, вмъкваме ги и им присвояваме атрибути, дори методи със същото име, което е много приятно. А чрез задаване на данни в процеса на добавяне на елементи ние внасяме динамика! Ето такъв прост пример вече трябва да ви покаже как стоят нещата.
Кодът по-горе може и трябва, разбира се, да бъде оптимизиран чрез задаване на масив от координати и стартиране на всичко в цикъл, като по този начин се премахваповтарящи се парчета код, но тук не говорим за оптимизация на кода, а за основите и възможностите на библиотеката. Продължавай.
Но дори използването на цикли в програмния код при използване на библиотеката D3 не е напълно правилно, тъй като тя има своя собствена концепция за работа с масиви от данни и се крие във факта, че когато работи с голям масив от произволни данни, програмистът работи по същия начин, както ако работи с един елемент.
D3 концепция
Сега нека създадем нов HTML5 документ и там да маркираме някои важни тагове, в които ще пишем скриптове в бъдеще:
Този празен документ е план за изграждане на динамична диаграма със случайни числа, но в същото време, с този прост пример, ние изследваме една от трите възможни важни ситуации при работа с D3: внедряването на входния поток Enter на страницата.
Ситуацията Въвеждане на входен поток възниква, когато има по-малко DOM елементи от количеството данни или изобщо няма DOM елементи, но има данни. В този случай се избира подмножество от елементи от целия набор от елементи, които трябва да бъдат добавени към страницата, като се използва специалният метод .append ( ) за това.
Нека вмъкнем скрипта за генериране на масив в нашия документ вместо // . функция за генериране на масив. над затварящия заглавен таг и веднага след функцията, ще формираме данните: var randData = numRand(50);, произволни числа в диапазона 0..50. В момента имаме празен div, което означава, че все още няма абсолютно никакви DOM елементи в него, но вече има данни, променливата randData съдържа масив от произволни числа!
Нека добавим статични стилове за нашата диаграма, за това вместо / inline styles /, нека създадем правило, което ще описва колоните на нашата диаграма:
Класът .bar ще зададе същата ширина за колоните,подложка и цвят на шрифта вътре. Сега къде е фразата // . D3 скрипт. Нека вмъкнем скрипт, който обвързва данните от масива и създава DOM елементите вътре в div с помощта на метода .append():
Методът .data() свързва данните от масива със селекцията, върната от метода .selectAll(). Тук задаваме, че новосъздадените елементи ще бъдат span, но тъй като в момента няма елементи от данни, запазваме място въз основа на факта, че всеки елемент от масива от данни съответства на DOM span елемент. Междувременно методът .enter() разпределя подмножество от елементи, които да бъдат добавени (ще има толкова елементи span, колкото има елементи в масива randData). Методът .append() директно добавя елементи към DOM.
За да съответства височината на колоните на числовите стойности на масива, за всеки новодобавен елемент, височината и цветът се формират динамично с помощта на функцията за обратно извикване (d, i), където се предава стойността на d и i - това е текущата стойност на елемента на масива и неговия пореден номер, а в тялото на функцията връщаме резултата, например за височината: < return 3*d+"px" >, връщам три пъти стойността на текущия елемент от масива, поради което може да се твърди, че максималната височина на колоната може да бъде 150px, а минималната 0. По същия начин можете да управлявате цвета на колоните!
Комплекти за изход и актуализация
По-горе разгледахме ситуацията, когато се формира набор от входния поток Enter и се реализира най-простата вертикална диаграма, базирана на добавяне на DOM елементи, за които има данни в масива. Но има и обратна ситуация: когато има по-малко данни от елементите на страницата, на които тези данни ще съответстват, в този случай такива елементи автоматично попадат в подмножеството Exit и впоследствие се премахват чрез метода .remove ().
Ситуацията на изходния поток възниква, когато има повече DOM елементи от количеството данни. В този случай от целия набор от елементи се избира подмножество от елементи, които не отговарят на данните и трябва да бъдат премахнати от страницата чрез специалния за целта метод .remove ().
Наборът за актуализиране съответства на елементи, за които има съответни елементи от масив и DOM елементи, но чиито стойности са променени. Тази ситуация е между Enter и Exit.