Διαδραστικές εφαρμογές με το React & D3

Εάν σκέφτεστε να κάνετε οπτικοποίηση δεδομένων στο React, ρίξτε μια ματιά στο Semiotic, ένα πλαίσιο απεικόνισης δεδομένων που ανέπτυξα για το React.

Ο συνδυασμός των D3.js και του React είναι ένα από τα πράγματα που δεν είναι καινούργια, αλλά δεν έχει ακόμη καθιερωθεί αρκετά ώστε να δείχνει έναν σίγουρο τρόπο να το κάνει. Σε αυτό το απόσπασμα από το βιβλίο μου D3.js στο Action, Second Edition, θα σας δείξω τις βασικές τεχνικές για το συνδυασμό React και D3 και θα εξηγήσω τα πλεονεκτήματα και τις αδυναμίες τους. Ο κώδικας για αυτό το παράδειγμα μπορεί να βρεθεί στον κώδικα του κεφαλαίου React στο D3.js στο repo της Action.

Το πλήρες παράδειγμα που δημιουργείτε στο Κεφάλαιο 9 του D3.js στην Ενέργεια. Σε αυτό το άρθρο θα καταφέρουμε να πάρουμε μέρος του γραφήματος και κάποιου χάρτη.

Αρχίζουμε με ένα σχέδιο για τον πίνακα ελέγχου μας. Τα σχέδια μπορεί να είναι ακατέργαστα σκίτσα ή λεπτομερή σύνολα απαιτήσεων των χρηστών. Ας φανταστούμε ότι εργάζεστε για τον κορυφαίο ευρωπαίο πωλητή ηλεκτρονικών τραπεζιού, MatFlicks, και είστε υπεύθυνοι για τη δημιουργία ενός ταμπλό με την εμφάνιση της Βόρειας Αμερικής και της Νότιας Αμερικής. Ο Διευθύνων Σύμβουλος της MatFlicks, Matt Flick, αποφάσισε ότι η στρατηγική για την ανάπτυξη θα είναι αλφαβητική, οπότε η Αργεντινή θα έχει πρόσβαση την Ημέρα 0 και κάθε μέρα μία ακόμη χώρα θα έχει πρόσβαση στο καταπληκτικό απόθεμα MatFlicks. Πρέπει να δουν πώς εξελίσσεται γεωγραφικά, με την πάροδο του χρόνου και συνολικά ανά χώρα. Το παρακάτω σχήμα δείχνει ένα απλό σκίτσο για να το επιτύχει αυτό χρησιμοποιώντας αρκετά από τα διαγράμματα που εξερευνούμε στο D3.js in Action. Πρόκειται να δημιουργήσουμε τυχαία δεδομένα MatFlicks, με κάθε χώρα να παράγει μόνο τυχαία δεδομένα σε έσοδα δισεκατομμυρίων δολαρίων την ημέρα μετά την εμφάνισή της.

Με ένα τέτοιο ταμπλό δεδομένων, θέλουμε να παρέχουμε σε ένα χρήστη με πολλαπλές προοπτικές στα δεδομένα καθώς και την δυνατότητα ανίχνευσης των δεδομένων και των μεμονωμένων datapoints. Θα χρησιμοποιήσουμε ένα γράφημα γραμμής για να δείτε την αλλαγή με την πάροδο του χρόνου, ένα διάγραμμα ράβδων για τις πρώτες συνολικές αλλαγές και έναν χάρτη, ώστε οι χρήστες να μπορούν να δουν τη γεωγραφική κατανομή των δεδομένων μας. Θέλουμε επίσης να επιτρέψουμε στους χρήστες να κόβουν και να ζαρώνουν τα δεδομένα τους - λειτουργικότητα που επιτυγχάνεται εύκολα χρησιμοποιώντας ένα πινέλο.

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

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

Πίνακας ελέγχου CSS
path.countries {
   πλάτος διαδρομής: 1;
   εγκεφαλικό επεισόδιο: # 75739F;
   συμπληρώστε: # 5EAFC6;
}}

Ξεκινώντας με το React

Το React είναι ένα σύστημα διαχείρισης του κύκλου ζωής που αποτελεί μέρος ενός πολύ δημοφιλούς πλαισίου εφαρμογής και ενός αναπτυξιακού προτύπου. Το React είναι το επίπεδο προβολής και σας επιτρέπει να ορίζετε συστατικά HTML με προσαρμοσμένη συμπεριφορά, η οποία είναι εξαιρετικά χρήσιμη για τη σύνταξη εφαρμογών. Χρησιμοποιεί μια γλώσσα JavaScript JavaScript HTML που ονομάζεται JSX που με άφησε όταν το είδε για πρώτη φορά, αλλά τώρα μου αρέσει. Δεν μου άρεσε γιατί αισθάνθηκα πάντα ότι το JavaScript και το HTML θα έπρεπε να ζουν σε τελείως ξεχωριστούς κόσμους, αλλά ανακάλυψα αργότερα ότι η γραφή HTML μέσα στο JavaScript θα μπορούσε να είναι εξαιρετικά χρήσιμη όταν χειρίζεστε το DOM, όπως είχαμε με τη βανίλια D3 αυτό το βιβλίο.

Συνήθως, όταν βλέπετε παραδείγματα React, τα συνδυάζουν με ένα είδος συστήματος διαχείρισης πολιτικών όπως το Flux ή το Redux. Δεν θα το κάνουμε σε αυτό το κεφάλαιο. Αυτό είναι ένα μόνο κεφάλαιο και μπορείτε να βρείτε ολόκληρα βιβλία σχετικά με το React.

Θα χρειαστείτε να εγκαταστήσετε το σύστημα διαχείρισης κόμβων κόμβων και κόμβων (npm) στο σύστημά σας, καθώς και μια μικρή άνεση με τη γραμμή εντολών. Υπάρχουν μεγάλα βιβλία για το React, όπως το React Γρήγορα, οπότε αυτό θα χαράξει μόνο την επιφάνεια, αλλά μόνο αυτό το κεφάλαιο θα σας φτάσει στο σημείο μιας πλήρως αυτοτελούς εφαρμογής απεικόνισης δεδομένων React.

Γιατί να αντιδράσω, γιατί όχι το X;

Το React είναι προφανώς η καλύτερη βιβλιοθήκη που έγινε ποτέ και αν σας αρέσει η γωνιακή, είστε χαζός, αδερφέ (και καν δεν με ξεκινήσατε στο Ember). Οχι δεν είναι πραγματικά. Αυτό είναι φρικτό, και είναι πολύ κακό ότι οι άνθρωποι επενδύονται τόσο στη δικαιοσύνη της συγκεκριμένης βιβλιοθήκης τους.

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

Βασικά, το React αποτελείται από ένα πλαίσιο δημιουργίας συστατικών που σας επιτρέπει να δημιουργείτε αυτοτελείς στοιχεία (όπως div ή svg: rect) που έχουν προσαρμοσμένες μεθόδους απόδοση, ιδιότητες, κατάσταση και μεθόδους κύκλου ζωής.

Καθιστώ

Ένα από τα σημαντικότερα χαρακτηριστικά του React είναι ότι παρακολουθεί ένα αντίγραφο του DOM, γνωστό ως Εικονικό DOM, το οποίο μπορεί να χρησιμοποιήσει μόνο για την απόδοση στοιχείων που πρέπει να αλλάξουν με βάση τη λήψη νέων κύκλων αποθήκευσης δεδομένων και την επιτάχυνση των εφαρμογών σας στο διαδίκτυο . Αυτό ήταν το μεγάλο σημείο πώλησης του React όταν έπεσε για πρώτη φορά, αλλά έγινε δημοφιλές σε άλλα συστήματα απεικόνισης προβολής. Η συνάρτηση rendering () σε κάθε στοιχείο React επιστρέφει τα στοιχεία που θα δημιουργηθούν από το React (συνήθως περιγράφεται με χρήση του JSX, το οποίο εισάγεται σε αυτό το κεφάλαιο).

Υποστήριξη

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

κατάσταση

Ενώ τα υποστηρίγματα μεταδίδονται σε ένα στοιχείο, η κατάσταση ενός στοιχείου αποθηκεύεται και τροποποιείται εσωτερικά μέσα στο στοιχείο. Όπως και αυτό, υπάρχει ένα αντίστοιχο statestate που θα σας δώσει την τρέχουσα κατάσταση. Όταν τροποποιείτε την κατάσταση (χρησιμοποιώντας αυτό το στοιχείο .setState σε ένα στοιχείο), θα ενεργοποιήσει αυτόματα μια επανεγγραφή, εκτός αν έχετε τροποποιήσει το mustComponentUpdate (μια μέθοδος κύκλου ζωής που εξετάζεται στην επόμενη ενότητα).

Μέθοδοι κύκλου ζωής

Τα αντικείμενα αντιδράσεων εκθέτουν μεθόδους κύκλου ζωής που πυρπολούν καθώς το στοιχείο δημιουργείται και ενημερώνεται και λαμβάνει τα στηρίγματα του. Είναι εξαιρετικά χρήσιμα και ακόμη και απαραίτητα σε ορισμένες περιπτώσεις χρήσης, όπως θα δούμε αργότερα. Έχετε, για παράδειγμα, τηνComponentUpdate, η οποία σας επιτρέπει να καθορίσετε τη λογική για το αν το στοιχείο εκ νέου αναπαράγεται όταν λαμβάνει νέα στηρίγματα ή κατάσταση. Υπάρχει επίσης willComponentUpdate και didComponentUpdate για να προσθέσετε λειτουργικότητα στο συστατικό σας πριν ή μετά την ενημέρωση, μαζί με παρόμοιες μεθόδους για το πότε το στοιχείο αρχικά τοποθετείται ή εξέρχεται (και μερικά περισσότερα). Θα έρθω σε αυτές τις μεθόδους που ισχύουν για τις ανάγκες απεικόνισης των δεδομένων μας, αλλά δεν θα τα αγγίξω σε όλα αυτά.

react-create-app: ρύθμιση της εφαρμογής σας

Μία από τις προκλήσεις της σύγχρονης ανάπτυξης είναι να δημιουργηθεί το περιβάλλον σας. Ευτυχώς, υπάρχει ένα εργαλείο γραμμής εντολών που σας ξεκινάει και υποστηρίζεται από την ομάδα React: create-react-app

Στο OSX μπορείτε να ανοίξετε το παράθυρο του τερματικού σας και να εκτελέσετε τις ακόλουθες εντολές:

npm install -g δημιουργία-αντιδρά-app
create-react-app d3ia
cd d3ia /
npm start

Η εγκατάσταση της εφαρμογής σας React είναι τόσο εύκολη. Εάν πλοηγηθείτε στο localhost: 3000, θα δείτε τη σελίδα της εφαρμογής boilerplate create-react-app παρακάτω. Εάν έχετε προβλήματα ή χρειάζεστε οδηγίες για τα Windows, ανατρέξτε στη διεύθυνση https://github.com/facebookincubator/create-react-app.

Η προεπιλεγμένη σελίδα που δημιουργεί-αντιδρά-app εφαρμόζεται με.

Μαζί με την εκκίνηση του διακομιστή κόμβων που εκτελεί τον κώδικα, αυτό θα δημιουργήσει όλη τη δομή που χρειάζεστε για να δημιουργήσετε και να αναπτύξετε μια εφαρμογή React την οποία θα την χρησιμοποιήσουμε για την κατασκευή του πίνακα ελέγχου. Αυτή η δομή περιέχει ένα αρχείο package.json που αναφέρει όλες τις ενότητες που περιλαμβάνονται στο έργο σας και στις οποίες πρέπει να προσθέσουμε μερικές ακόμα ενότητες για να φτιάξουμε τον πίνακα ελέγχου μας. Προσθέτουμε modules που χρησιμοποιούν NPM και ενώ θα μπορούσαμε να συμπεριλάβουμε ολόκληρη τη βιβλιοθήκη D3 και να διατηρήσουμε την κωδικοποίηση όπως έχουμε, είναι καλύτερο να εγκαταστήσετε τις μεμονωμένες μονάδες και να κατανοήσετε πώς λειτουργεί η εισαγωγή αυτών των μονάδων. Στον κατάλογο του έργου εκτελέστε τα παρακάτω για να εγκαταστήσετε τη μονάδα κλίμακας d3:

npm i -SE d3 κλίμακα

Αυτή η εντολή (npm i είναι σύντομη για την εγκατάσταση npm) εγκαθιστά την τελευταία έκδοση της κλίμακας d3 (η οποία μας δίνει πρόσβαση σε όλες τις υπέροχες κλίμακες που χρησιμοποιούμε στα τελευταία οκτώ κεφάλαια) και η ετικέτα -SE αποθηκεύει την ακριβή έκδοση σε το package.json σας, ώστε όταν θέλετε να αναπτύξετε αυτήν την εφαρμογή αλλού, εγκαθίσταται η κλίμακα d3. Μαζί με την κλίμακα d3, κάνουμε το ίδιο πράγμα με τις παρακάτω ενότητες:

d3-σχήμα
d3-svg-μύθος
d3-array
d3-geo
d3-επιλογή
d3-μετάβαση
d3-brush
άξονα d3

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

JSX

Το JSX αναφέρεται σε JavaScript + XML, μια ενσωματωμένη γλώσσα κωδικοποίησης JavaScript και HTML που σας επιτρέπει να γράφετε κώδικα HTML με τον κώδικα JavaScript. Απαιτεί ότι ο κώδικας θα μετατραπεί σε απλό JavaScript - το πρόγραμμα περιήγησης δεν μπορεί να τρέξει natively το JSX - αλλά εφ 'όσον έχετε ρυθμίσει το transpiling σας (το οποίο αντιδρά-create-app ήδη κάνει για εμάς) μπορείτε να γράψετε κώδικα όπως αυτό:

const δεδομένα = ['ένα', 'δύο', 'τρία']
const divs = data.map ((d, i) => 
{d} )
const περιτύλιγμα = 
className = 'περιτύλιγμα'> {divs} 

Και μπορείτε να δημιουργήσετε μια σειρά από τρία στοιχεία div, καθένα από τα οποία θα έχει την αντίστοιχη συμβολοσειρά από τη συστοιχία σας ως περιεχόμενο. Παρατηρήστε μερικά πράγματα που συμβαίνουν εδώ. Κάποιος, όταν αρχίζουμε να γράφουμε σε HTML, πρέπει να χρησιμοποιήσουμε σγουρά (με έντονους χαρακτήρες για την έμφαση παραπάνω) για να βγούμε από αυτό, αν θέλουμε να βάλουμε το js εκεί. Αν δεν είχα βάλει σγουράκια γύρω από το d, για παράδειγμα, τότε όλα τα δικά μου θα είχαν το γράμμα "d" ως περιεχόμενο τους. Ένα άλλο είναι ότι το στυλ είναι ένα αντικείμενο που μεταφέρεται σε ένα στοιχείο και ότι το αντικείμενο χρειάζεται CSS κλειδιά που συνήθως είναι περίπτωση φιδιού (όπως αριστερό περιθώριο) μετατρέπεται σε καμάκι (marginleft). Όταν κάνουμε μια σειρά από στοιχεία, κάθε ένας χρειάζεται μια ιδιότητα "κλειδί" που του δίνει ένα μοναδικό κλειδί (όπως το προαιρετικό κλειδί όταν χρησιμοποιούμε .data () με D3). Τέλος, όταν θέλετε να ορίσετε μια κλάση CSS ενός στοιχείου, πρέπει να χρησιμοποιήσετε className, επειδή η κλάση είναι αποκλειστική.

Υπάρχουν περισσότερα για την JSX, αλλά αυτό θα πρέπει να είναι αρκετό για να σας αφήσει να έχετε νόημα του κώδικα που πρόκειται να δείτε. Όταν ήξερα για πρώτη φορά το JSX, ήμουν πεπεισμένος ότι ήταν μια φρικτή ιδέα και σχεδίαζε να χρησιμοποιήσω μόνο τις καθαρές λειτουργίες rendering JavaScript που έχει η React (δεν χρειάζεται να χρησιμοποιήσεις το JSX για να χρησιμοποιήσεις το React), αλλά μετά από μερικές εβδομάδες, έπεσα αγάπη με αυτό. Η ικανότητα να δημιουργηθούν στοιχεία από την πτήση με δεδομένα πραγματικά μου έκανε έκκληση λόγω της εμπειρίας μου με την D3.

Παραδοσιακή απόδοση D3 με το React

Η πρόκληση της ενσωμάτωσης του D3 με το React είναι ότι το React και το D3 θέλουν αμφότερα να ελέγξουν το DOM. Ολόκληρο το πρότυπο επιλογής / εισαγωγής / εξόδου / ενημέρωσης με το D3 βρίσκεται σε άμεση διένεξη με το React και το εικονικό του DOM. Αν έρχεστε να απαντήσετε από την D3, αφήνοντας το πιάσιμο σας στο DOM είναι μια από αυτές τις στιγμές "ψυχρών, νεκρών χεριών". Ο τρόπος με τον οποίο οι περισσότεροι χρήστες χρησιμοποιούν το D3 με το React είναι να χρησιμοποιήσουν το React για να δημιουργήσουν τη δομή της εφαρμογής και να αποδώσουν τα παραδοσιακά στοιχεία HTML και έπειτα όταν πρόκειται για την οπτικοποίηση δεδομένων, περνούν από ένα δοχείο DOM (συνήθως ) πάνω στο D3 και χρησιμοποιήστε το D3 για να δημιουργήσετε και να καταστρέψετε και να ενημερώσετε τα στοιχεία. Κατά κάποιο τρόπο, είναι παρόμοιος με τον τρόπο που χρησιμοποιούσαμε τις μικροεφαρμογές Java ή το Flash για να τρέξουμε ένα μαύρο κουτί στη σελίδα σας, ενώ η υπόλοιπη σελίδα σας αποδίδεται ξεχωριστά. Το όφελος αυτής της μεθόδου ενσωμάτωσης των React και D3 είναι ότι μπορείτε να χρησιμοποιήσετε όλο το ίδιο είδος κώδικα που βλέπετε σε όλα τα παραδείγματα πυρήνα D3. Η κύρια δυσκολία είναι ότι πρέπει να δημιουργήσετε λειτουργίες σε διάφορα συμβάντα κύκλου ζωής του React, για να βεβαιωθείτε ότι οι ενημερώσεις σας αφορούν.

Η λίστα που ακολουθεί δείχνει ένα απλό συστατικό διάγραμμα ράβδου που κατασκευάστηκε χρησιμοποιώντας αυτή τη μέθοδο. Δημιουργήστε αυτό το στοιχείο στον src / κατάλογο σας και αποθηκεύστε το ως BarChart.js. Στο React, τα ονόματα αρχείων συστατικών και τα ονόματα λειτουργιών είναι συνήθως διαφοροποιημένα από άλλα αρχεία κώδικα και λειτουργίες χρησιμοποιώντας τη καμάρα και την κεφαλαιοποίηση του πρώτου γράμματος όπως αυτό.

BarChart.js

εισαγάγετε React, {Component} από το 'react'
εισαγωγή './App.css'
εισαγωγή {scaleLinear} από την κλίμακα "d3"
εισαγωγή {max} από το 'd3-array'
εισαγωγή {select} από την επιλογή 'd3-επιλογή'
class BarChart επεκτείνει το στοιχείο {
   κατασκευαστής (στηρίγματα) {
      σούπερ (στηρίγματα)
      this.createBarChart = this.createBarChart.bind (αυτό)
   }}
   componentDidMount () {
      this.createBarChart ()
   }}
   componentDidUpdate () {
      this.createBarChart ()
   }}
   createBarChart () {
      const node = this.node
      const δεδομέναMax = max (this.props.data)
      const yScale = κλίμακαLinear ()
         .domain ([0, dataMax])
         .range ([0, this.props.size [1]])
   επιλέξτε (κόμβος)
      .selectAll ('rect')
      .data (this.props.data)
      .εισαγω()
      .append ('rect')
   
   επιλέξτε (κόμβος)
      .selectAll ('rect')
      .data (this.props.data)
      .έξοδος()
      .αφαιρώ()
   
   επιλέξτε (κόμβος)
      .selectAll ('rect')
      .data (this.props.data)
      .style ('fill', '# fe9922')
      .attr ('χ', (d, i) => i * 25)
      .attr ('y', d => this.props.size [1] - yScale (d))
      .attr ('ύψος', d => yΚλίμακα (d))
      .attr ('πλάτος', 25)
   }}
render () {
      επιστροφή  this.node = κόμβος}
      πλάτος = {500} ύψος = {500}>
      
   }}
}}
εξαγάγετε την προεπιλεγμένη τιμή BarChart

Μερικές εξηγήσεις για το τι συμβαίνει στον κώδικα εδώ:

  • Επειδή εισάγουμε λειτουργίες D3 από τις μονάδες, δεν έχουν το d3. πρόθεμα, αντί να είναι η εισαγόμενη λειτουργία όπως η κλίμακαLinear.
  • Στον κατασκευαστή, πρέπει να δεσμεύσετε το στοιχείο ως το πλαίσιο σε οποιεσδήποτε νέες εσωτερικές λειτουργίες, εάν θέλετε να έχετε πρόσβαση σε αυτό το πρότυπο (αυτό δεν χρειάζεται να γίνει για τις υπάρχουσες λειτουργίες του κύκλου ζωής).
  • Εκτελώντας αυτό το .createBarChart στο componentDidMount και componentDidUpdate, κάθε φορά που η συνιστώσα αρχικά τοποθετεί ή λαμβάνει νέα υποστηρίγματα / πυρκαγιά κατάστασης, η λειτουργία του γραφήματος ράβδων.
  • this.node έχει οριστεί στην ιδιότητα ref του στοιχείου svg και λειτουργεί ως αναφορά στον πραγματικό κόμβο DOM που δημιουργήθηκε από το React, ώστε να μπορείτε να παραδώσετε αυτόν τον κόμβο DOM στη λειτουργία D3.
  • το μέγεθος και τα δεδομένα μεταβιβάζονται ως στηρίγματα στο στοιχείο, έτσι ώστε να έχετε πρόσβαση σε αυτά με this.props.size και this.props.data στον κωδικό D3 σας.
  • Το Render απλά επιστρέφει ένα στοιχείο SVG που περιμένει τον κωδικό σας D3. Παρακάτω θα δούμε πώς να χρησιμοποιήσετε το React για να δημιουργήσετε ολόκληρο το γράφημα.

Η πραγματοποίηση αυτών των αλλαγών και η αποθήκευση τους δεν θα έχει άμεση επίδραση, επειδή δεν εισάγετε και αποδίδετε αυτό το στοιχείο στο App.js, το οποίο είναι το συστατικό που παρήγαγε αρχικά η εφαρμογή σας. Αλλάξτε το App.js για να ταιριάζει με την ακόλουθη καταχώριση.

Αναφορά του BarChart.js στο App.js
εισαγάγετε React, {Component} από το 'react'
εισαγωγή './App.css'
εισαγωγή BarChart από το "./BarChart"
Η εφαρμογή κλάσης επεκτείνει το στοιχείο {
   render () {
   ΕΠΙΣΤΡΟΦΗ (
      
      
      

πίνακας εργαλείων d3ia              
                        )    }} }}

εξαγωγή προεπιλεγμένης εφαρμογής

Οι αλλαγές εδώ είναι ότι εισάγουμε το νεοδημιουργημένο συστατικό μας (BarChart.js) και διαβιβάζουμε ορισμένα δεδομένα και μέγεθος σε αυτό το στοιχείο (με αυτόν τον τρόπο την προσπελάσαμε στο props.data και το props.size στο createBarChart) .

Όταν αποθηκεύετε το App.js με αυτές τις αλλαγές, θα δείτε κάτι πολύ δροσερό αν έχετε τρέξει το διακομιστή σας: ενημερώνει αυτόματα τη σελίδα για να σας δείξει τι είναι στο παρακάτω σχήμα. Αυτό είναι το Webpack - ο πακέτο στοιχείων που περιλαμβάνεται στην εφαρμογή δημιουργίας-αντίδρασης - ενημερώνει αυτόματα την εφαρμογή σας βάσει αλλαγών στον κώδικά σας.

Η πρώτη σας εφαρμογή React + D3, με ένα απλό διάγραμμα ράβδων που παρέχεται στην εφαρμογή σας.

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

Αντιδρά για τη δημιουργία στοιχείων, D3 ως ο πυρήνας οπτικοποίησης

Αντί να χρησιμοποιήσετε το ref για να αποκτήσετε τον πραγματικό κόμβο DOM και να περάσετε τον κόμβο DOM στον D3, μπορείτε να χρησιμοποιήσετε το D3 για να δημιουργήσετε όλες τις απαραίτητες οδηγίες σχεδίασης και να χρησιμοποιήσετε το React για να δημιουργήσετε τα πραγματικά στοιχεία DOM. Υπάρχουν προκλήσεις με αυτήν την προσέγγιση στη δημιουργία κινούμενων μεταβάσεων και draggable στοιχεία, αλλά αλλιώς είναι προτιμότερο επειδή θα δημιουργήσει κώδικα που θα είναι πιο συντηρητικός από τους λιγότερο D3-επικεντρωμένους συναδέλφους σας.

Ο παρακάτω κώδικας δείχνει πώς μπορούμε να κάνουμε αυτό για να αναδημιουργήσουμε έναν από τους χάρτες που έγιναν στο κεφάλαιο γεωγραφικών δεδομένων απεικόνισης D3.js in Action. Σε αυτό το παράδειγμα εισάγουμε γεωγραφικά δεδομένα (στην περίπτωση αυτή world.js) αντί για φόρτωση γεωδεδομένων όπως τα παραδοσιακά παραδείγματα δείχνουν. Αυτό γίνεται με τη μετατροπή του αρχείου gejson .js προσθέτοντας μια μικρή σύνταξη εξαγωγής ES2015 στην αρχή του αντικειμένου JSON (μπορείτε να δείτε τον κώδικα στο github repo). Ο κώδικας στην επόμενη καταχώριση είναι παρόμοιος με αυτόν που έχουμε δει πριν, εκτός από τη στιγμή που το χρησιμοποιούμε για τη δημιουργία στοιχείων JSX που αντιπροσωπεύουν κάθε χώρα και συμπεριλαμβάνουμε τα γεωγραφικά δεδομένα αντί να χρησιμοποιούμε ένα αίτημα XHR.

WorldMap.js
εισαγάγετε React, {Component} από το 'react'
εισαγωγή './App.css'
εισαγωγή παγκόσμιων δεδομένων από './world'
εισαγωγή {geoMercator, geoPath} από το "d3-geo"
class WorldMap επεκτείνει το στοιχείο {
   render () {
      const προβολή = geoMercator ()
      const pathGenerator = geoPath () προβολή (προβολή)
      const countries = worlddata.features
         .map ((d, i) => <μονοπάτι
         κλειδί = {'path' + i}
         d = {pathGenerator (d)}
         className = 'χώρες'
         />)
   επιστροφή 
   {χώρες}
   
   }}
}}
εξαγωγή του προεπιλεγμένου WorldMap

Αντί να μιλάμε με κλήσεις async (χρησιμοποιώντας το d3.json για παράδειγμα), μπορούμε απλώς να εισαγάγουμε τα δεδομένα χαρτών δεδομένου ότι δεν θα αλλάξουν. Θεωρώ ότι είναι καλύτερο να μετατρέψουμε οποιαδήποτε στατικά στοιχεία σε .js και να τα εισάγουμε αντί να χρησιμοποιούμε αιτήματα XHR. Χρησιμοποιούμε το εγγενές Array.map για να αντιστοιχίσετε τα arrays σε στοιχεία svg: path και συμπληρώστε το d χαρακτηριστικό καθενός από αυτά τα στοιχεία διαδρομής χρησιμοποιώντας τη γεωγραφική λειτουργικότητα του D3. Αυτή η σειρά από μονοπάτια απλώς πέφτει σε κάποια σγουρά αγκύλια μέσα στο svg και αυτό είναι όλο που υπάρχει για να δημιουργήσετε ένα choroplethth χάρτη στο React με D3. Είναι σχεδόν το ίδιο με το μοτίβο δέσμευσης δεδομένων που βλέπουμε στο D3, εκτός από το ότι χρησιμοποιούμε native Array.map για να χαρτογραφήσουμε τα μεμονωμένα στοιχεία δεδομένων σε στοιχεία DOM λόγω της μαγείας του JSX.

Ένας βασικός χάρτης που παρέχεται μέσω του React και του JSX με το D3 που παρέχει τις οδηγίες σχεδίασης.

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

Στο κεφάλαιο 9 του D3.js in Action το παράδειγμα αυτό συνεχίζεται με την προσθήκη ρολογιού, βούρτσας, μεγέθους απόκρισης και πολλά άλλα. Αλλά αυτό σας δείχνει τους δύο βασικούς τρόπους προσέγγισης της ενσωμάτωσης του D3 και του React.