Представяне на

Какво е D3.js?

В сравнение с пикселното изкуство, SVG има редица предимства. По-специално, SVG е базиран на xml, което го прави по-четлив. Освен това SVG кодът е по-лек от файловете с изображения.

До голяма степен поради това, D3 в момента е една от най-популярните рамки, използвани за обработка на графични данни и създаване на всякакви диаграми и графики.

Какво ви трябва, за да разработите с D3.js? Първо, трябва да изтеглим самата библиотека от официалния уебсайт http://d3js.org/.

Можете също да свържете към библиотеката директно от CDN от официалния уебсайт:

SVG и D3.js

Както вече споменахме, D3.js използва SVG, което включва използването на векторни графики за визуализиране на данни. Нека направим малък пример със SVG и D3.js. Нека създадем малка html страница:

Нека стартираме тази страница в браузър. Ще получим две еднакви червени колони:

Нека

Първо свързваме самата библиотека от официалния CDN:

След това се създават най-простите графики на svg. Ако не сте запознати със SVG, тази технология ще бъде относително лесна за работа. SVG ви позволява да използвате готови блокове (линии, кръгове, правоъгълници и т.н.) за създаване на графики. В този случай се изчертава правоъгълник с помощта на елемента rect.

Следва действителната работа на D3.js:

Всъщност същият svg елемент с идентичен html код ще бъде формиран тук с помощта на верига от извиквания, с подобни атрибути и набор от стилове. Само в този случай се отдалечаваме от директното използване на SVG технологията към javascript.