Μάθετε 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όλα τα στοιχεία πριν τα δημιουργήσουμε, αλλά έτσι λειτουργεί το D3.

    Στη συνέχεια διαβιβάζουμε τα δεδομένα με τη data()μέθοδο και προσθέτουμε enter(), η οποία λειτουργεί σαν βρόχος. Όλα μετά από αυτό το σημείο θα εκτελούνται μία φορά ανά στοιχείο στον fruitsπίνακα.

    Με άλλα λόγια, προσαρτά στη συνέχεια ένα <li> για κάθε στοιχείο στα δεδομένα. Για το every

  • προσθέτει επίσης κείμενο μέσα t usinστη μέθοδο κειμένου (). Η eπαράμετρος d insidη συνάρτηση επιστροφής κειμένου () αναφέρεται στο στοιχείο του πίνακα στη δεδομένη επανάληψη (apple, mang o, και ούτω καθεξής).

    Εδώ είναι το τελικό μας αποτέλεσμα:

    Δημιουργία στοιχείων SVG

    Το Scalable Vector Graphics (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 :-)