Научите Д3.јс за 5 минута

Увод у креирање визуелних приказа ваших података

Д3.јс је ЈаваСцрипт библиотека која се користи за манипулацију документима на основу података. Користи ХТМЛ, ЦСС и СВГ за креирање визуелних приказа података који се могу прегледати у било ком савременом прегледачу.

Такође пружа неке сјајне функције за интеракције и анимације.

У овом упутству истражићемо основне концепте и карактеристике Д3.јс. Научићемо како се користи уз помоћ неколико примера попут приказивања тракасти графикона, приказивања ХТМЛ и СВГ елемената и примене трансформација и догађаја на њих.

Такође смо креирали бесплатни курс од 10 делова на Д3.јс на Сцримби. Погледајте овде.

Први кораци са Д3

Како је Д3.јс ЈаваСцрипт библиотека, можете је једноставно укључити у своју ХТМЛ датотеку унутар ознаке скрипте.

Пун извор и тестови су такође доступни за преузимање на ГитХуб-у.

ДОМ Селецтион

Коришћењем Д3.јс можемо да манипулишемо објектним моделом документа (ДОМ), што значи да можемо да бирамо елементе и применимо различите трансформације на њих.

Почнимо са једноставним примером, где ћемо помоћу Д3 одабрати и променити боју и величину фонта ознаке наслова.

 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(). Први параметар диктира шта желимо да променимо, а други даје вредност. Ево резултата:

Подаци везивања

Следећи концепт који ћете морати научити је везивање података, јер је то једна од најлепших карактеристика Д3. Користећи га, можемо у реалном времену попунити или манипулисати ДОМ елементима.

У нашем ХТМЛ-у имамо једноставну неуређену листу <ул>:


    

    Желимо да креирамо елементе листе помоћу објекта података. Ево кода за тачно то:

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

    У нашем ЈаваСцрипт коду изнад, Д3 прво бира <ул> ан d anи

  • елементи de it usна elect() andоснову метода селецтАлл (). Може изгледати помало чудно да ми leнаводимо све елементе ли пре него што смо их креирали, али Д3 управо тако функционише.

    Затим податке проследимо data()методом и додамо enter(), што делује попут петље. Све након ове тачке извршиће се једном по ставци у fruitsнизу.

    Другим речима, онда додаје <ли> за сваку ставку у подацима. За everгод

  • ознака, она такође додаје текст унутар t usinметоде тект (). Тх eпараметар д insidе текстуалних () повратни функција односи се на елемент у низу на датом итерације (јабуке, манг о, и тако даље).

    Ево и нашег коначног резултата:

    Креирање СВГ елемената

    Скалабилна векторска графика (СВГ) је начин приказивања графичких елемената и слика у ДОМ-у. Како се СВГ заснива на векторима, истовремено је лаган и скалабилан. Д3 користи СВГ за креирање свих својих визуелних слика, те је стога основни блок библиотеке.

    Овде у примеру испод, црта се правоугаоник помоћу Д3 у СВГ контејнеру.

    //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');

    У овом коду, Д3 приказује елемент правоугаоника унутар ДОМ-а. Прво бира СВГ елемент, а затим у њему приказује елемент правоугаоника. Такође attr()методом поставља координате правоугаоника к и и заједно са ширином, висином и својствима попуњавања .

    Креирање тракасте табеле

    Д3 нам такође омогућава да створимо пуно различитих типова графикона и графикона за представљање података на ефикасан начин. У примеру испод, креирамо једноставни тракасти графикон помоћу Д3.

    Почнимо са стварањем СВГ ознаке директно у нашем ХТМЛ-у.

    Затим ћемо написати ЈаваСцрипт који нам је потребан да бисмо пружили тракасти графикон у нашем 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 :-)