Научете D3.js за 5 минути

Въведение в създаването на визуални изображения на вашите данни

D3.js е JavaScript библиотека, използвана за манипулиране на документи въз основа на данни. Той използва HTML, CSS и SVG, за да създаде визуални представяния на данни, които могат да бъдат преглеждани във всеки съвременен браузър.

Той също така предлага някои страхотни функции за взаимодействия и анимации.

В този урок ще разгледаме основните концепции и характеристики на D3.js. Ще научим как да го използваме с помощта на няколко примера като изобразяване на стълбовидна диаграма, изобразяване на HTML и SVG елементи и прилагане на трансформации и събития към тях.

Създадохме и безплатен курс от 10 части по D3.js на Scrimba. Вижте тук.

Първи стъпки с D3

Тъй като D3.js е JavaScript библиотека, можете просто да го включите във вашия HTML файл в скрипт тагове.

Пълният източник и тестове също са достъпни за изтегляне от GitHub.

Избор на DOM

Използвайки D3.js, можем да манипулираме обектния модел на документ (DOM), което означава, че можем да избираме елементи и да прилагаме различни трансформации върху тях.

Нека започнем с един прост пример, където ще използваме D3 за избор и промяна на цвета и размера на шрифта на заглавен маркер.

 Learn D3 in 5 minutes

Today is a beautiful day!!

d3.select('h3').style('color', 'darkblue'); d3.select('h3').style('font-size', '24px');

Така че ние просто оковаваме select()метода върху d3обекта и след това проследяваме style(). Първият параметър диктува какво искаме да променим, а вторият дава стойността. Ето резултата:

Обвързване на данни

Следващата концепция, която ще трябва да научите, е обвързването на данни, тъй като това е една от най-страхотните характеристики на D3. Използвайки го, можем да попълваме или манипулираме DOM елементи в реално време.

В нашия HTML имаме прост неуреден списък <ul>:

    Искаме да създадем елементите на списъка с помощта на обект от данни. Ето кода за точно това:

     var fruits = ['apple', 'mango', 'banana', 'orange']; d3.select('ul') .selectAll('li') .data(fruits) .enter() .append('li') .text(function(d) { return d; });

    В нашия JavaScript код по-горе, D3 първо избира <ul> an d any

  • елементи de it us, elect() andописващи методите selectAll (). Може да изглежда малко странно, че избираме leвсички li елементи, преди да сме ги създали, но точно така работи D3.

    След това предаваме данните с data()метода и добавяме enter(), което работи като цикъл. Всичко след тази точка ще бъде изпълнено веднъж за елемент в fruitsмасива.

    С други думи, след това добавя <li> за всеки елемент в данните. За every

  • Original text


  • таг, той също добавя текст вътре в t usinметода text (). Th eпараметър г insidелектронна функция за обратно извикване на текст () се отнася до елемент в масива в даден итерация (ябълка, Mang о, и т.н.).

    Ето и крайния ни резултат:

    Създаване на SVG елементи

    Скалируема векторна графика (SVG) е начин за изобразяване на графични елементи и изображения в DOM. Тъй като SVG е базиран на вектори, той е едновременно лек и мащабируем. D3 използва SVG, за да създаде всичките си визуализации и следователно е основен градивен елемент на библиотеката.

    Тук в примера по-долу се изчертава правоъгълник с помощта на D3 в SVG контейнер.

    //Select SVG elementvar svg = d3.select('svg');
    //Create rectangle element inside SVGsvg.append('rect') .attr('x', 50) .attr('y', 50) .attr('width', 200) .attr('height', 100) .attr('fill', 'green');

    В този код D3 изобразява правоъгълен елемент вътре в DOM. Първо избира SVG елемента и след това рендира правоъгълен елемент вътре в него. Той също така задава x и y координати на правоъгълника, заедно с неговата ширина, височина и свойства на запълване, използвайки attr()метода.

    Създаване на стълбовидна диаграма

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

    Нека започнем, като създадем SVG маркер директно в нашия HTML.

    След това ще напишем JavaScript, който ни е необходим, за да изобразим гистограмата в нашата vg> tag:

    var data = [80, 120, 60, 150, 200];
    var barHeight = 20;
    var bar = d3.select('svg') .selectAll('rect') .data(data) .enter() .append('rect') .attr('width', function(d) { return d; }) .attr('height', barHeight - 1) .attr('transform', function(d, i) { return "translate(0," + i * barHeight + ")"; });

    In this code, we have an array of numbers which we will use to render our bar chart. Each item in an array would represent a single bar. We make use of the fact that bars are just rectangles with variable width or height.

    After selecting the SVG and rectangle elements, we pass our dataset using the data() method and call enter() to start looping on data.

    For each data item, we render a rectangle and set its width equivalent to its value. We then set the height of each bar, and to avoid overlapping, we provide some padding to it by subtracting 1 from barHeight.

    We then transform our bars using the translate property which will position every rectangle one after another rather than starting from the same point. transform() takes a callback function which gets data and index in its parameters. We translate the rectangle on the y-axis, by multiplying index with the height of the bar.

    Here’s the result:

    Event Handling

    Finally, let’s also look at event handling. D3 also supports built-in and custom events which we can bind to any DOM element with its listener. In the example below, we are binding the click event to the button and appending a heading tag to a body in its event handler.

    d3.select('#btn') .on('click', function () { d3.select('body') .append('h3') .text('Today is a beautiful day!!'); });

    So when we click the button, the text below appears:

    Conclusion

    D3.js is a very powerful, yet simple, JavaScript library that allows you to play with and bring life to documents based on data using HTML, CSS, and SVG.

    There are a lot of good resources available online to learn D3.js. There is a free course on D3.js which we have created on Scrimba and is available for free here.

    Thank you :)

    I am Sohaib Nehal. I am a Full-Stack Web Application Developer. You can reach me at [email protected] or on Twitter @Sohaib_Nehal. Thank you :-)