Μάθετε να δημιουργείτε ένα γράφημα ράβδων με το D3 - Ένα σεμινάριο για αρχάριους

Το D3.js είναι η πιο δημοφιλής βιβλιοθήκη JavaScript για τη δημιουργία οπτικών αναπαραστάσεων των δεδομένων σας. Ωστόσο, είναι λίγο δύσκολο να μάθετε, οπότε πιστεύω ότι είναι σημαντικό να ξεκινήσετε απαλά.

Σε αυτό το σεμινάριο, θα μάθετε πώς να δημιουργείτε το πρώτο γράφημα ράβδων με το D3. Θα σας δώσει μια εισαγωγή στις πιο σημαντικές έννοιες, ενώ θα διασκεδάζετε να χτίζετε κάτι.

Δημιουργήσαμε επίσης ένα δωρεάν μάθημα D3.js στο Scrimba. Δείτε το εδώ.

Τώρα ας ξεκινήσουμε.

Η εγκατάσταση

Θα χρησιμοποιήσουμε την απλούστερη δυνατή εγκατάσταση, απλά εισάγοντας τη βιβλιοθήκη D3 από ένα CDN.

Θα γράψουμε τον κωδικό D3 στην ετικέτα σεναρίου. Δεύτερον, προσθέσαμε ένα στοιχείο στο DOM. Εάν θέλετε να παίξετε με τον κωδικό καθώς διαβάζετε αυτό το σεμινάριο, δείτε αυτήν την παιδική χαρά Scrimba, η οποία περιέχει την τελική έκδοση του κώδικα.

Το πρώτο πράγμα που πρόκειται να κάνουμε είναι να επιλέξετε αυτό το στοιχείο και να το στυλ λίγο.

var svgWidth = 500; var svgHeight = 300; var svg = d3.select('svg') .attr("width", svgWidth) .attr("height", svgHeight) .attr("class", "bar-chart"); 

Το δίνουμε πλάτος και ύψος, συν ένα .bar-chartμάθημα. Στο CSS μας, έχουμε διαμορφώσει την τάξη ως εξής:

.bar-chart { background-color: #C7D9D9; } 

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

Τώρα έχουμε ένα ωραίο κοντέινερ SVG όπου μπορούμε να σχεδιάσουμε το γράφημα ράβδων μας. Ο κώδικας για κάτι τέτοιο είναι λίγο περίπλοκος, οπότε ας δούμε πρώτα ολόκληρο το θέμα και μετά ακολουθούμε κάθε βήμα:

var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160]; var barPadding = 5; var barWidth = (svgWidth / dataset.length); var barChart = svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("y", function(d) { return svgHeight - d }) .attr("height", function(d) { return d; }) .attr("width", barWidth - barPadding) .attr("transform", function (d, i) { var translate = [barWidth * i, 0]; return "translate("+ translate +")"; }); 

επιλογή όλων()

Το πρώτο πράγμα που κάνουμε μπορεί να φαίνεται λίγο περίεργο, κάνουμε .selectAll("rect"), ωστόσο, δεν έχουμε δημιουργήσει ακόμη στοιχεία. Έτσι, αυτή η μέθοδος επιστρέφει μια κενή επιλογή (έναν κενό πίνακα). Ωστόσο, σύντομα θα δημιουργήσουμε στοιχεία enter().append().

Αυτό μπορεί να φαίνεται λίγο συγκεχυμένο. Αλλά εξηγώντας πώς selectAll()λειτουργεί σε συνδυασμό με enter().append()είναι εκτός του πεδίου αυτού του σεμιναρίου. Εάν θέλετε να το κατανοήσετε σωστά, διαβάστε αυτό το άρθρο πολύ προσεκτικά.

δεδομένα()

Στη συνέχεια αλυσολογούμε τη data()μέθοδο και περνάμε στο σύνολο δεδομένων μας. Τα δεδομένα θα καταλήξουν να υπαγορεύουν το ύψος κάθε ράβδου.

εισαγω()

Το επόμενο βήμα είναι η αλυσίδα της enter()μεθόδου. Τα enter()βλέμματα τόσο στο σύνολο δεδομένων που μεταφέρατε όσο data()  και στην επιλογή που κάναμε selectAll('rect')και στη συνέχεια προσπαθεί να αναζητήσει "αγώνες". Έτσι δημιουργεί μια αντιστοίχιση μεταξύ των δεδομένων σας και του DOM.

Αλλά θυμηθείτε, η selectAll('rect')μέθοδος επέστρεψε μια κενή επιλογή, καθώς δεν υπάρχουν ακόμη στοιχεία στο DOM. Ωστόσο, το σύνολο δεδομένων έχει εννέα στοιχεία. Δεν υπάρχουν λοιπόν «αγώνες».

Στη enter()συνέχεια, η μέθοδος σάς επιτρέπει να δημιουργήσετε ένα νέο στοιχείο στο DOM για κάθε στοιχείο στο σύνολο δεδομένων που δεν έχει ακόμη ένα αντίστοιχο στοιχείο.

προσαρτώ()

Στην επόμενη γραμμή, προσαρτάμε ένα στοιχείο για κάθε ένα από τα στοιχεία. Καθώς ακολουθεί αυτή η μέθοδος enter(), θα εκτελεστεί εννέα φορές, μία για κάθε σημείο δεδομένων που δεν έχει αντίστοιχο στο DOM.

attr ()

Το επόμενο βήμα είναι να αποφασίσετε το σχήμα καθενός από τα ορθογώνια (οι ράβδοι μας). Πρέπει να δώσουμε τέσσερις ιδιότητες: ύψος, πλάτος, x-θέση και y-θέση . Θα χρησιμοποιήσουμε τη attr()μέθοδο για όλα αυτά.

Ας ξεκινήσουμε με τη θέση y:

.attr("y", function(d) { return svgHeight - d }) 

Η πρώτη παράμετρος υπαγορεύει ποιο χαρακτηριστικό θέλουμε να προσθέσουμε: σε αυτήν την περίπτωση, η συντεταγμένη y της γραμμής. Στο δεύτερο, έχουμε πρόσβαση σε μια συνάρτηση επανάκλησης στην οποία πρόκειται να επιστρέψουμε την τιμή που θέλουμε να έχει το χαρακτηριστικό μας.

Εδώ, έχουμε πρόσβαση στο σημείο δεδομένων σε αυτό το βήμα της διαδικασίας επανάληψης (θυμηθείτε, αυτή η μέθοδος καλείται μία φορά ανά στοιχείο στον datasetπίνακα). Το σημείο δεδομένων αποθηκεύεται στο dόρισμα. Στη συνέχεια, θα αφαιρέσουμε το δεδομένο σημείο δεδομένων d, από το ύψος του κοντέινερ SVG.

Οι συντεταγμένες X και y υπολογίζονται πάντα ξεκινώντας από την επάνω αριστερή γωνία. Έτσι, όταν αφαιρούμε το ύψος του δοχείου με την dτιμή, παίρνουμε τη συντεταγμένη y για την κορυφή της ράβδου.

Για να κάνουμε τη ράβδο να τεντωθεί από αυτό το σημείο και κάτω στο κάτω μέρος του κοντέινερ SVG, θα πρέπει να της δώσουμε ένα ύψος ισοδύναμο με την τιμή του σημείου δεδομένων:

.attr("height", function(d) { return d; }) 

Το επόμενο βήμα είναι να του δοθεί ένα πλάτος:

.attr ("πλάτος", barWidth - barPadding)

Εδώ, απλώς περνάμε σε μια απλή έκφραση σε αντίθεση με τη λειτουργία επανάκλησης, καθώς δεν χρειαζόμαστε πρόσβαση στο σημείο δεδομένων. Απλώς παίρνουμε μια βάση στη barWidthμεταβλητή που δημιουργήσαμε περαιτέρω, που είναι το συνολικό πλάτος του κοντέινερ διαιρούμενο με τον αριθμό των ράβδων. Προκειμένου να έχουμε ένα μικρό κενό μεταξύ κάθε ράβδου, θα αφαιρέσουμε επίσης την επένδυση, την οποία ορίσαμε ως 5.

Το τελευταίο βήμα είναι να ορίσετε τις συντεταγμένες x. Αυτή η έκφραση είναι λίγο πιο περίπλοκη:

.attr("transform", function (d, i) { var xCoordinate = barWidth * i; return "translate("+ xCoordinate +")"; }); 

Εδώ, είμαστε πρώτα απ 'όλα την αξιοποίηση μιας δεύτερης παραμέτρου στο επανάκλησης, i. Αυτό είναι το ευρετήριο του δεδομένου στοιχείου στον πίνακα.

Για να ορίσετε τη συντεταγμένη για καθεμία από τις μπάρες, θα πολλαπλασιάσουμε απλώς το ευρετήριο με τη barWidthμεταβλητή. Στη συνέχεια, θα επιστρέψουμε μια τιμή συμβολοσειράς που περιγράφει τη μετατροπή για τον άξονα x, για παράδειγμα "translate(100)". Αυτό θα ωθούσε τη ράβδο 100 pixel προς τα δεξιά.

Και έτσι, έχετε το πρώτο σας ραβδόγραμμα στο D3.js.

Εάν ενδιαφέρεστε να μάθετε περισσότερα για το D3.js, φροντίστε να δείτε το δωρεάν μάθημα για το Scrimba

Ευχαριστώ για την ανάγνωση! Το όνομά μου είναι Per Borgen, είμαι ο συνιδρυτής της Scrimba - ο ευκολότερος τρόπος για να μάθεις τον κώδικα. Εάν θέλετε να μάθετε να δημιουργείτε σύγχρονες ιστοσελίδες σε επαγγελματικό επίπεδο, θα πρέπει να ελέγξετε το bootcamp σχεδιασμού ιστοσελίδων που ανταποκρίνεται.