Sužinokite D3.js per 5 minutes

Įvadas į vizualių jūsų duomenų vaizdų kūrimą

D3.js yra „JavaScript“ biblioteka, naudojama manipuliuoti dokumentais remiantis duomenimis. Jis naudoja HTML, CSS ir SVG, kad sukurtų vizualius duomenų vaizdus, ​​kuriuos galima peržiūrėti bet kurioje šiuolaikinėje naršyklėje.

Tai taip pat suteikia puikių funkcijų sąveikai ir animacijoms.

Šioje pamokoje išnagrinėsime pagrindines „D3.js“ koncepcijas ir ypatybes. Sužinosime, kaip juo naudotis, pasinaudojant keliais pavyzdžiais, pvz., Juostų diagramos atvaizdavimu, HTML ir SVG elementų atvaizdavimu ir transformacijų bei įvykių pritaikymu jiems.

Mes taip pat sukūrėme nemokamą 10 dalių kursą apie D3.js apie Scrimba. Patikrinkite tai čia.

Darbo su D3 pradžia

Kadangi D3.js yra „JavaScript“ biblioteka, galite ją tiesiog įtraukti į savo HTML failą kaip scenarijaus žymą.

Visą šaltinį ir testus taip pat galima atsisiųsti iš „GitHub“.

DOM pasirinkimas

Naudodami D3.js galime manipuliuoti „Document Object Model“ (DOM), o tai reiškia, kad galime pasirinkti elementus ir pritaikyti jiems įvairias transformacijas.

Pradėkime nuo paprasto pavyzdžio, kur naudosime D3, kad pasirinktume ir pakeistume antraštės žymos spalvą ir šrifto dydį.

 Learn D3 in 5 minutes

Today is a beautiful day!!

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

Taigi mes paprasčiausiai susiejame select()metodą su d3objektu ir paskui jį sekame style(). Pirmasis parametras nurodo, ką norime pakeisti, o antrasis suteikia vertę. Štai rezultatas:

Duomenų įpareigojimas

Kita sąvoka, kurią turėsite išmokti, yra duomenų įrišimas, nes tai yra viena šauniausių D3 savybių. Naudodamiesi juo, galime užpildyti ar manipuliuoti DOM elementais realiuoju laiku.

Mūsų HTML yra paprastas nesutvarkytas sąrašas <ul>:


    

    Norime sukurti sąrašo elementus naudodami duomenų objektą. Štai kodas, kaip tiksliai tai padaryti:

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

    Aukščiau esančiame „JavaScript“ kode D3 pirmiausia pasirenka <ul> an d any

  • elementai, de it uskuriuose yra elect() andpasirinkti visi () metodai. Gali atrodyti šiek tiek keista, kad mes darome levisus li elementus, kol juos dar nesukūrėme, tačiau kaip tik tai veikia D3.

    Tada mes perduodame duomenis su data()metodu ir pridedame enter(), kuris veikia tarsi kilpa. Viskas po šio punkto bus vykdoma vieną kartą kiekviename fruitsmasyvo elemente .

    Kitaip tariant, tada jis prideda <li> kiekvienam duomenų elementui. Dėl every

  • žymą, ji taip pat prideda tekstą t usinmetodo „text ()“ viduje . Th eparametras d inside text () callback funkcija nurodo masyvo elementą duotoje iteracijoje (obuolys, mang o ir t. T. ).

    Taigi, čia yra mūsų galutinis rezultatas:

    SVG elementų kūrimas

    „Scalable Vector Graphics“ (SVG) yra būdas pateikti grafinius elementus ir vaizdus DOM. Kadangi SVG yra vektorinė, ji yra ir lengva, ir keičiama. D3 naudoja SVG, kad sukurtų visus vaizdus, ​​todėl tai yra pagrindinis bibliotekos elementas.

    Žemiau pateiktame pavyzdyje stačiakampis brėžiamas naudojant D3 SVG talpykloje.

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

    Šiame kode D3 pateikia stačiakampio elementą DOM viduje. Pirmiausia jis pasirenka SVG elementą ir tada jo viduje pateikia stačiakampį elementą. Naudojant attr()metodą, jis taip pat nustato stačiakampio x ir y koordinates, taip pat jo pločio, aukščio ir užpildymo savybes .

    Juostinės diagramos kūrimas

    D3 taip pat leidžia mums sukurti daug įvairių tipų diagramų ir grafikų, kad duomenys būtų efektyviai pavaizduoti. Toliau pateiktame pavyzdyje mes kuriame paprastą juostinę diagramą naudodami D3.

    Pradėkime sukurdami SVG žymą tiesiai į savo HTML.

    Tada mes parašysime „JavaScript“, kurio mums reikia, kad juostelės diagrama būtų pateikta mūsų 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 :-)