Μενού

Λειτουργίες API D3.js - Οδηγός με παραδείγματα

  • Κύριος
  • Αλλα
  • Λειτουργίες API D3.js - Οδηγός με παραδείγματα

d3 js api functions tutorial with examples

Δοκιμάστε Το Όργανο Μας Για Την Εξάλειψη Των Προβλημάτων

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

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

καλύτερη εφαρμογή κατασκοπευτικού τηλεφώνου για Android

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

Λειτουργίες API σε D3.js

Τι θα μάθετε:

Δεσμευτικό δεδομένων με D3.js

Για να δημιουργήσετε οπτικοποίηση δεδομένων, όπως γραφήματα και γραφήματα, απαιτείται η δέσμευση ή η σύνδεση δεδομένων με ένα στοιχείο DOM.

Τα δεδομένα μπορεί να είναι ένας πίνακας που είναι ένα κοντέινερ που περιέχει αριθμητικές τιμές των ίδιων τύπων, όπως φαίνεται παρακάτω.

var data = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5)

Το πρώτο βήμα θα είναι η δημιουργία ενός αντικειμένου SVG, προκειμένου να έχει ένα επίπεδο ή ένα πλαίσιο για την κατασκευή οπτικοποίησης δεδομένων εξωτερικών δεδομένων, το στοιχείο HTML επιλέγεται με το d3.select () και προσαρτά το SVG που λειτουργεί ως καμβάς προσθέτοντας χαρακτηριστικά όπως πλάτος και ύψος για τον καμβά.

var svg = d3.select(HTML element like body or div) .attr(width, value from variable for width) .attr(height, value from variable for height)

Το επόμενο βήμα είναι η εισαγωγή του στοιχείου SVG «g» που ενεργεί σαν μια ομάδα που περιέχει άλλα στοιχεία SVG.

svg.selectAll ('g')

Επιπλέον, συνδέστε ή ενώστε δεδομένα σε αυτό το σχήμα SVG που είναι συνδεδεμένο με καμβά, χρησιμοποιώντας τη συνάρτηση .data (data).

svg.selectAll ('g').data(data)

Το επόμενο βήμα είναι να συνδέσετε τα δεδομένα με τα στοιχεία DOM χρησιμοποιώντας τη μέθοδο .enter () στη συνάρτηση .data (data).

svg.selectAll ('g').data(data).enter()

Επιπλέον, προσαρτήστε το σχήμα SVG έτσι ώστε να μπορούμε να προσαρμόσουμε το σχήμα στον καμβά.

svg.selectAll ('g') . data(data).enter().append('g')

Ένα παράδειγμα δέσμευσης δεδομένων δίνεται παρακάτω.

var infoset = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5) var span = 500, ceil = 500; var scalespan = d3.scaleLinear() .domain((0, d3.max(infoset))) .range((0, 400)); var screen = d3.select('body').append('svg') .attr('width', span) .attr('height', ceil) .append('g').attr('transform', 'translate(5,20)'); var rule = screen.selectAll('rect') .data(infoset).enter() .append('rect') .attr('width', function(d){ return scalespan(d);}) .attr('height', 20) .attr('y', function(d, i){ return i*25; }) .attr('fill', '#b3ccff'); screen.selectAll('text') .data(infoset).enter().append('text') .attr('y', function(d, i){ return i*25; }) .attr('x', function(d){ return scalespan(d);}) .text(function(d) {return d;}) .attr('fill', 'blue').attr('dy','.85em'); Συμμετοχή, φόρτωση και ανάλυση δεδομένων σε D3.js
Η έξοδος καταγράφεται σε γραφική μορφή συντεταγμένων με σύνδεση δεδομένων

Προκειμένου να δεσμεύσουμε τα δεδομένα, τα οποία στην περίπτωσή μας, είναι μια πληθυσμιακή πυκνότητα ηπείρου

var infoset = (59,5, 17,2, 9,6, 7,6, 5,5, 0,5)

Η μεταβλητή οθόνη εκχωρείται σε μια περιοχή σχεδίασης συνδέοντας το σχήμα SVG στο στοιχείο html, το οποίο είναι το σώμα στην περίπτωσή μας.

Το εύρος κλίμακας μεταβλητής λαμβάνει τη συνάρτηση scaleLinear () με παραμέτρους τομέα και εύρους προκειμένου να σχεδιάσει ένα γράφημα για να εμφανίσει τιμές στην κλίμακα σε γραφική μορφή.

.data (infoset) .enter () θα βοηθήσει στη δέσμευση του συνόλου δεδομένων μας που έχει εκχωρηθεί σε μια μεταβλητή Infoset.

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

Συμμετοχή, φόρτωση και ανάλυση δεδομένων σε D3.js

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

Διαφορετικές μορφές δεδομένων είναι CSV, JSON, TSV και XML, ενώ d3.csv (), d3.JSON (), d3.tsv () και d3.xml () είναι οι αντίστοιχες μέθοδοι που παρέχονται για τη φόρτωση αρχείων δεδομένων σε διαφορετικά μορφές από εξωτερικές πηγές στέλνοντας ένα αίτημα http στην καθορισμένη διεύθυνση url για να φορτώσετε αρχεία ή δεδομένα των αντίστοιχων μορφών, καθώς και να εκτελέσετε τη λειτουργία επιστροφής με τα αντίστοιχα αντικείμενα δεδομένων.

προεπιλεγμένη τοποθεσία
Τα εξωτερικά δεδομένα σε διάφορες μορφές μπορούν να εμφανιστούν όπως φαίνεται παραπάνω

Η σύνταξη για φόρτωση αρχείου δεδομένων CSV είναι όπως δίνεται παρακάτω.

d3.csv (url (, row, callback));

# 1) Η πρώτη παράμετρος url παραπάνω είναι η διεύθυνση URL ή η διαδρομή του διακομιστή του αρχείου csv που είναι εξωτερικό αρχείο που θα φορτωθεί από τη συνάρτηση d3.csv. στην περίπτωσή μας, είναι

http: // localhost: 8080 / παραδείγματα / movie_published.csv

#δύο) Η δεύτερη παράμετρος είναι προαιρετική

# 3) Η τρίτη παράμετρος είναι Callback που είναι μια συνάρτηση που μπορεί να περάσει ως όρισμα από μια άλλη συνάρτηση, διασφαλίζοντας ότι ο συγκεκριμένος κώδικας εκτελείται έως ότου ένας άλλος κώδικας έχει ήδη ολοκληρώσει την εκτέλεση για μορφές JSON, TSV και XML του αρχείου, η συνάρτηση d3.csv είναι αντικαταστάθηκε με d3.json, d3.tsv και d3.xml αντίστοιχα.

Παρακάτω δίνεται ένα παράδειγμα ανάλυσης εξωτερικών δεδομένων.

d3.csv('movie_published.csv', function(data) { console.log(data); });
Το d3.csv () θα φορτώσει το αρχείο CSV όπως φαίνεται παραπάνω.

Εάν ανοίξει στο πρόγραμμα περιήγησης Google Chrome, κάντε κλικ στο F12 και η ανανέωση της σελίδας θα εμφανίσει το αρχείο καταγραφής της κονσόλας από τον κωδικό που στην περίπτωσή μας είναι το console.log (data), το οποίο θα εμφανίζει τιμές από το σύνολο δεδομένων, με κεφαλές στήλης, όνομα_ ταινίας και έτος να εμφανίζεται από το αρχείο CSV που διατηρείται στη θέση του διακομιστή.

Χειρισμός τυχαίων αριθμών σε D3.js

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

Αυτές οι λειτουργίες χρησιμοποιούν κυρίως το Math. τυχαία συνάρτηση του JavaScript που παράγει αριθμούς που κυμαίνονται μεταξύ του ελάχιστου και του μέγιστου αριθμού του καθορισμένου εύρους, οδηγεί σε έναν μοναδικό αριθμό κάθε φορά που τα μαθηματικά. εκτελείται τυχαία συνάρτηση.

  • d3.randomUniform - Δημιουργήστε τυχαίους αριθμούς από μια ομοιόμορφη κατανομή. Π.χ. d3.randomUniform (1, 2) () - θα επιστρέψει τυχαίους αριθμούς που περιλαμβάνουν 1 και λιγότερους από 2.
  • d3. τυχαία κανονική - Δημιουργήστε τυχαίους αριθμούς από μια κανονική κατανομή, Π.χ. d3.randomNormal (1, 2) () - θα επιστρέψει έναν ακέραιο αριθμό που είναι μεταξύ μιας καθορισμένης ελάχιστης τιμής και των μέγιστων τιμών.
  • d3.randomLogNormal - Δημιουργήστε τυχαίους αριθμούς από μια κανονική κατανομή log, και η αναμενόμενη τιμή θα είναι η φυσική τιμή λογάριθμου για την τυχαία μεταβλητή.
  • d3.randomBates - Δημιουργήστε τυχαίους αριθμούς από μια κατανομή Bates, με ανεξάρτητες μεταβλητές.
  • d3.randomIrwinHall - Δημιουργήστε τυχαίους αριθμούς από μια διανομή Irwin – Hall.
  • d3.randomExponential - Δημιουργήστε τυχαίους αριθμούς από μια εκθετική κατανομή.

Παράδειγμα τυχαίων συναρτήσεων στο d3

Random Functions in d3

Random Functions in d3

document.write(d3.randomUniform(1, 2)() +'

'); document.write(d3.randomNormal(1, 2)()+'

'); document.write(d3.randomLogNormal(1, 2)()+'

'); document.write(d3.randomBates(1, 2)()+'

'); document.write(d3.randomIrwinHall(1, 2)()+'

'); document.write(d3.randomExponential(1, 2)()+'

');

Εμφανίζεται η έξοδος των τυχαίων μεθόδων d3

Παρεμβολή σε D3.js

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

Τύπος τελικής τιμής βΧρησιμοποιήθηκε το όνομα της μεθόδου
Εάν το b είναι ένας γενικός πίνακαςinterpolateArray ()
Εάν το b είναι Boolean, null ή απροσδιόριστοΘα χρησιμοποιηθεί το σταθερό b
Εάν το b είναι ένας αριθμόςinterpolateNumber ()
Εάν το b είναι ένα χρώμα ή μια συμβολοσειρά που αναφέρεται στο χρώμαinterpolateRgb ()
Εάν το b είναι ημερομηνίαinterpolateΗμερομηνία ()
Εάν το b είναι μια συμβολοσειράinterpolateString ()
Εάν το b είναι μια πληκτρολογημένη σειρά αριθμώνinterpolateNumberArray ()
Εάν το b αναφέρεται στον αριθμόinterpolateNumber ()
Σε διαφορετική περίπτωσηinterpolateObject ()

Το παρακάτω παράδειγμα εξηγεί:

  • d3.interpolateNumber () συνάρτηση με 10 ως τιμή εκκίνησης και τελική τιμή ως 20, οι τιμές που εμφανίζονται κυμαίνονται από την τιμή έναρξης 10 έως την τελική τιμή 20 για παρεμβολές παρεμβολής από (0,0) έως (0,5) έως (1,0)
  • d3.interpolateRgb () συνάρτηση για δύο διαφορετικά ονόματα χρωμάτων που έχουν ως αποτέλεσμα αντίστοιχες τιμές rgb («r», «g», «b»), για παρεμβολές παρεμβολής από (0,0) έως (0,5) έως (1,0)
  • Η συνάρτηση d3.interpolateDate () για δύο διαφορετικές ημερομηνίες με τη μορφή «yyyy-mm-dd hh: mm: ss», θα εμφανίζει ημερομηνίες μεταξύ του παραπάνω εύρους ημερομηνιών, για παρεμβολές παρεμβολών από (0,0) έως (1,0)

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

Interpolate Numbers, Colors and Dates

var inpolat = d3.interpolateNumber(99,100); document.write(inpolat(0.0) + '

'); document.write(inpolat(0.2)+ '

'); document.write(inpolat(0.5) + '

'); document.write(inpolat(1.0)+ '

'); var inpolcolrs = d3.interpolateRgb('yellow', 'aquamarine'); document.write(inpolcolrs(0.0)+ '

'); document.write(inpolcolrs(0.2)+ '

'); document.write(inpolcolrs(0.5)+ '

'); document.write(inpolcolrs(0.8)+ '

'); document.write(inpolcolrs(1.0)+ '

'); var inpoldates = d3.interpolateDate(new Date('2020-01-01 00:00:00'), new Date('2020-01-15 23:59:59')); document.write(inpoldates(0.0)+ '

'); document.write(inpoldates(0.2)+ '

'); document.write(inpoldates(0.5)+ '

'); document.write(inpoldates(0.8)+ '

'); document.write(inpoldates(1.0)+ '

');

Παρεμβολή σε D3.js για αριθμούς και χρώματα

Μορφοποίηση κειμένου και διεθνοποίηση με D3.js

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

D3 - τοπικό ()

d3.locale (ορισμός), θα επιστρέψει τοπικές ρυθμίσεις για τον ορισμό, από προεπιλογή, ο ορισμός τοπικής ρύθμισης είναι Αγγλικά ΗΠΑ για d3.locale (ορισμός),

μεταγλωττιστής c ++ για έκλειψη

Οι ιδιότητες για μορφοποίηση αριθμών για τον ορισμό τοπικών παρατίθενται παρακάτω.

  • δεκαδικός: Το δεκαδικό σημείο εφαρμόζεται συνήθως σε νομίσματα όπως 25,75 ( Π.χ. '.').
  • χιλιάδες: Το Thousand είναι ένα αναγνωριστικό ή ένα διαχωριστικό που χρησιμοποιείται ως κόμμα μετά από χίλιες τιμές όπως 2.475 ( Π.χ. ',').
  • ομαδοποίηση: Η ομάδα του Array για κάθε ομάδα και το μέγεθος μπορεί να ελεγχθεί χρησιμοποιώντας το Arrayname (5), όπου το 5 είναι ένα ευρετήριο και το μέγεθος του πίνακα είναι 6 μέλη.
  • νόμισμα: Πρόθεμα και επίθημα για τις συμβολοσειρές νομισμάτων ( Π.χ. ('$', '')).
  • ημερομηνία ώρα: Η μορφή ημερομηνίας και ώρας (% c) θα έχει ημερομηνία και ώρα ( Π.χ. '% A% b% e% X% Y').
  • ημερομηνία: Η ημερομηνία (% x) ( Π.χ. Συμβολοσειρά μορφής '% m /% d /% Y') σε Μήνα ημέρα και έτος.
  • χρόνος: Ο χρόνος (% X) ( Π.χ. '% H:% M:% S') συμβολοσειρά μορφής σε Hours Minutes and Seconds.
  • έμμηνα: Το A.M. της περιοχής και P.M. ισοδύναμα ( Π.χ. ('Π.Μ. Μ.Μ')).
  • ημέρες: Ημέρες της εβδομάδας, ξεκινώντας από την Κυριακή, σε αλφάβητα.
  • shortDays: Σύντομες ημέρες ή συντομευμένα ονόματα όπως SUN, MON, κ.λπ. των καθημερινών, ξεκινώντας από την Κυριακή.
  • μήνες: Τα πλήρη ονόματα του μήνα ως Οκτώβριος (ξεκινώντας από τον Ιανουάριο).
  • shortMonths: Σύντομοι Μήνες ή συντομευμένα ονόματα όπως JAN, FEB, MAR κ.λπ. των μηνών (ξεκινώντας από τον Ιανουάριο).

Όλες οι παράμετροι που εξηγούνται παραπάνω εμφανίζονται ως μεταβλητές με τις αντίστοιχες τιμές τους στην παρακάτω εικόνα.

Η προεπιλεγμένη τοποθεσία είναι en_US, οι ρωσικές τοπικές ρυθμίσεις (ru_RU) έχουν σταθερές ημερομηνίας, ώρας και διαστήματος.

D3. μορφή

Το d3.format από τη βιβλιοθήκη JavaScript παίρνει έναν αριθμό ως όρισμα εισαγωγής, η σύνταξη είναι d3.format (προσδιοριστής), προκειμένου να μετασχηματιστούν αριθμοί, χρησιμοποιείται το d3.format.

Ένα παράδειγμα εφαρμογής μορφής βάσει του d3 δίνεται παρακάτω.

Formatting for currency body {padding: 50px; font: 16px Courier;} p { color:blue; font-size: 16px; font-weight: bold;} var body = d3.select('body'); var comafmt = d3.format(','), decimalfmt = d3.format('.1f'), comadecimalfmt = d3.format(',.2f'), suffixfmt = d3.format('s'), suffixfmtDecimal1 = d3.format('.1s'), suffixfmtDecimal2 = d3.format('.2s'), rupiemoneyfmt = function(d) { return 'Rs ' + comadecimalfmt(d); }, intmoneyfmt = function(d) { return '$ ' + comadecimalfmt(d); }, euromoneyfmt= function(d) { return '€ ' + comadecimalfmt(d); }, percentfmt = d3.format(',.2%'); var number = 27500; body.append('p').text('Number used for formatting is : ' + number).style('font-weight', 'bold'); body.append('p').text(function() { return 'Indian Rupee format of above Number : ' + rupiemoneyfmt(number); }); body.append('p').text(function() { return 'International Currency format will be : ' + intmoneyfmt(number); }); body.append('p').text(function() { return 'Euro Currency format will be : ' + euromoneyfmt(number); }); body.append('p').text(function() { return 'Percent format : ' + percentfmt(number); }); body.append('p').text(function() { return 'Suffix for large number : ' + suffixfmt(number); }); body.append('p').text(function() { return 'Round off ceil number: ' + suffixfmtDecimal1(number); }); body.append('p').text(function() { return 'Round off floor number : ' + suffixfmtDecimal2(number); }); body.append('p').text(function() { return 'Comma for large number: ' + comafmt(number); }); body.append('p').text(function() { return 'One decimal format : ' + decimalfmt(number); }); body.append('p').text(function() { return 'Two decimal format : ' + comadecimalfmt(number); });
Η μορφοποίηση εφαρμόζεται για τον αριθμό και το νόμισμα χρησιμοποιώντας το d3.format

Τροποποίηση με μορφές ημερομηνίας με D3.js

Μορφοποίηση ώρας χρησιμοποιώντας βιβλιοθήκη D3.js, όπου το d3.timeParse μπορεί να εφαρμοστεί με χαρακτήρες μπαλαντέρ, δηλαδή κανονική έκφραση που βοηθούν στη μετατροπή της μορφής ώρας εισόδου στην επιθυμητή μορφή.

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

body {font-family: Arial, Helvetica, sans-serif; color: blue;} var datetimefmt = d3.timeFormat('%d-%m-%Y %H:%M:%S %p'); document.write(datetimefmt(new Date()) +'

'); var timePortion = d3.timeFormat('%H:%M:%S %p'); document.write(timePortion(new Date()) +'

'); var datePortion = d3.timeFormat('%B %d, %Y'); document.write(datePortion(new Date())+'

'); var datefmt = d3.timeFormat(' %d'); document.write(datefmt(new Date())+'

'); var dayfmt = d3.timeFormat('%A '); document.write(dayfmt(new Date())+'

'); var monfmt = d3.timeFormat('%B'); document.write(monfmt(new Date()) +'

');

Επεξήγηση της μορφής ημερομηνίας και ώρας

συμπέρασμα

Σε αυτό το σεμινάριο, έχουμε καλύψει όλες τις υπόλοιπες βασικές μεθόδους του D3.js, όπως η δέσμευση δεδομένων, όπου τα δεδομένα με τη μορφή ενός πίνακα και η ένωση, η φόρτωση καθώς και η ανάλυση δεδομένων είναι σε μορφή CSV, JSON και XML.

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

Συνιστώμενη ανάγνωση

^