Web-Frontend
js-Tutorial
Detaillierte Erläuterung der Probleme mit data(), enter() und exit() in D3.js_javascript-Kenntnissen
Detaillierte Erläuterung der Probleme mit data(), enter() und exit() in D3.js_javascript-Kenntnissen
D3 ist weit verbreitet und hat sich mittlerweile zu einem der gängigen Datenvisualisierungstools entwickelt. Als jeder zum ersten Mal mit d3.js in Kontakt kam, waren die Operationen von data(), enter() und exit() die schwierigsten Teile.
Nachdem ich eine Zeit lang damit in Kontakt war und etwas Verständnis dafür gewonnen habe, möchte ich kurz über mein Verständnis sprechen.
data()
Schauen wir uns zunächst ein Beispiel an:
<body> <p></p> <p></p> <p></p> </body>
Ausführungscode:
d3.select("body").selectAll("p").data([1, 2, 3])Hier wird data() verwendet, um Daten an das ausgewählte DOM-Element zu binden. Auf diese Weise können Sie einige verwandte Vorgänge an den Daten durchführen, z. B. das Festlegen der Elementbreite usw.
Oberflächlich sind keine Veränderungen erkennbar. Aber intern fügt es dem entsprechenden DOM-Element ein __data__-Attribut hinzu, das über document.getElementsByTagName("p")[0].__data__ sichtbar ist.
enter() und exit()
Diese beiden Operationen sind verwirrend, da es schwierig ist, allein aus ihren Namen abzuleiten, was sie bewirken.
Im obigen Beispiel von data() ist die Anzahl unserer DOM-Elemente und Daten gleich. Aber was sollen wir tun, wenn es anders ist?
Enter() und Exit() werden verwendet, um diese Situation zu bewältigen.
enter()
Wenn die Anzahl der DOMs geringer ist als die Anzahl der Daten oder überhaupt keine vorhanden sind, möchten wir normalerweise das Programm bei der Erstellung unterstützen lassen.
Im folgenden Beispiel stellen wir keine DOM-Elemente im Voraus bereit:
<body> </body>
Immer noch ausgeführt:
d3.select("body").selectAll("p").data([1, 2, 3])Der Unterschied zum obigen Beispiel besteht darin, dass wir im obigen Beispiel weiterhin Operationen wie .style("width", "100px") ausführen können. Das können wir hier aber nicht machen, da wir das DOM-Element nicht ausgewählt haben und es erst erstellen müssen.
enter() wird verwendet, um den fehlenden Teil von DOM-Elementen nach dem Binden von Daten auszuwählen. Wir fragen uns vielleicht, wie man wählt, da es sich um den fehlenden Teil handelt. Hier müssen wir ein wenig Fantasie einsetzen und uns vorstellen, dass wir uns für etwas entschieden haben, das es nicht gibt. Wir können es „virtuelles DOM“ oder „Platzhalter“ nennen.
enter() trifft nur eine Auswahl und fügt nicht die erforderlichen DOM-Elemente hinzu. Daher wird nach enter() normalerweise append() verwendet, um das DOM-Element tatsächlich zu erstellen.
Von nun an verwenden wir d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p"), um das automatisch zu erstellen Erforderliche DOM-Elemente.
Wie man mit der Eingabe umgeht
Wenn nicht genügend Elemente vorhanden sind, besteht die übliche Vorgehensweise darin, Elemente mit append() hinzuzufügen. Bitte schauen Sie sich den folgenden Code an:
<body>
<p></p>
<script>
var dataset = [3, 6, 9];
var p = d3.select("body").selectAll("p");
//绑定数据后，分别获取update和enter部分
var update = p.data(dataset);
var enter = update.enter();
//update部分的处理方法是直接修改内容
update.text( function(d){ return d; } );
//enter部分的处理方法是添加元素后再修改内容
enter.append("p")
.text(function(d){ return d; });
</script>
</body> In diesem Beispiel gibt es nur ein p-Element im Körper, aber drei Daten, sodass der Eingabeteil zwei zusätzliche Daten enthält. Die Methode zum Umgang mit redundanten Daten ist das entsprechende Append-Element. Nach der Verarbeitung gibt es im Körper drei p-Elemente, deren Inhalt ist:
<p>3</p> <p>6</p> <p>9</p>
Normalerweise sind nach dem Lesen der Datei vom Server die Daten vorhanden, aber es gibt keine Elemente auf der Webseite. Dies ist eine sehr wichtige Funktion von D3, das heißt, Sie können eine leere Menge auswählen und dann enter().append() verwenden, um Elemente einzufügen. Vorausgesetzt, dass der Körper jetzt kein p-Element enthält, sehen Sie sich bitte den folgenden Code an:
var dataset = [10,20,30,40,50];
var body = d3.select("body");
body.selectAll("p") //选择body中所有p，但由于没有p，所以选择了一个空集
.data(dataset) //绑定dataset数组
.enter() //返回enter部分
.append("p") //添加p元素
.text(function(d){ return d; }); Im obigen Code wählt „selectAll“ einen leeren Satz aus und bindet dann die Daten. Da der Auswahlsatz leer ist, ist der von data() zurückgegebene Aktualisierungsteil leer. Rufen Sie dann enter() und append() auf, sodass jedem Datenelement ein Element p entspricht. Ändern Sie abschließend den Inhalt des p-Elements. Das heißt, die übliche Art, mit dem Eingabeteil umzugehen, besteht darin, append() zum Hinzufügen von Elementen zu verwenden.
exit()
Im Gegensatz zu enter() wird exit() verwendet, um diejenigen DOM-Elemente auszuwählen, die im Vergleich zu den Daten zusätzlich sind.
Im folgenden Beispiel stellen wir ein weiteres DOM-Element bereit:
<body> <p></p> <p></p> <p></p> <p></p> </body>
Diesmal ist es leicht zu verstehen, denn es ist extra, dann existiert es tatsächlich, also das letzte
.
Wenn es mehr sind, können wir diese Elemente mit .remove() entfernen. Der Code lautet wie folgt:
d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();So gehen Sie mit dem Exit um
Es gibt zu viele Elemente und keine entsprechenden Daten. Bei solchen Elementen besteht der übliche Ansatz darin, das Element mit „remove()“ zu löschen. Unter der Annahme, dass der Körper 5 p-Elemente enthält, sehen Sie sich bitte den folgenden Code an:
var dataset = [10, 20, 30];
var p = d3.select("body").selectAll("p");
//绑定数据之后，分别获取update部分和exit部分
var update = p.data(dataset);
var exit = update.exit();
//update的部分的处理方法是修改内容
update.text( function(d){ return d; } );
//exit部分的处理方法是删除
exit.remove(); In diesem Code wird der Exit-Teil durch Löschen verarbeitet. Nach dem Löschen sind auf der Webseite keine überflüssigen p-Elemente mehr vorhanden.
Referenzmaterialien
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Ersetzen Sie Stringzeichen in JavaScript
Mar 11, 2025 am 12:07 AM
Detaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi
8 atemberaubende JQuery -Seiten -Layout -Plugins
Mar 06, 2025 am 12:48 AM
Nutzen Sie JQuery für mühelose Webseiten -Layouts: 8 Essential Plugins JQuery vereinfacht das Webseitenlayout erheblich. In diesem Artikel werden acht leistungsstarke JQuery -Plugins hervorgehoben, die den Prozess optimieren, insbesondere nützlich für die manuelle Website -Erstellung
Erstellen Sie Ihre eigenen AJAX -Webanwendungen
Mar 09, 2025 am 12:11 AM
Hier sind Sie also bereit, alles über dieses Ding namens Ajax zu lernen. Aber was genau ist das? Der Begriff AJAX bezieht sich auf eine lose Gruppierung von Technologien, mit denen dynamische, interaktive Webinhalte erstellt werden. Der Begriff Ajax, ursprünglich von Jesse J geprägt
10 JQuery Fun- und Games -Plugins
Mar 08, 2025 am 12:42 AM
10 Fun JQuery Game -Plugins, um Ihre Website attraktiver zu machen und die Stickinität der Benutzer zu verbessern! Während Flash immer noch die beste Software für die Entwicklung von lässigen Webspielen ist, kann JQuery auch überraschende Effekte erzielen und zwar nicht mit reinen Action -Flash -Spielen vergleichbar sind, aber in einigen Fällen können Sie auch einen unerwarteten Spaß in Ihrem Browser haben. JQuery Tic Toe Game Die "Hello World" der Game -Programmierung hat jetzt eine Jquery -Version. Quellcode JQuery Crazy Word Kompositionsspiel Dies ist ein Spiel mit der Füllung, und es kann einige seltsame Ergebnisse erzielen, da das Wort nicht kennt. Quellcode JQuery Mine Sweeping Game
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?
Mar 18, 2025 pm 03:12 PM
In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
JQuery Parallax Tutorial - Animated Header Hintergrund
Mar 08, 2025 am 12:39 AM
Dieses Tutorial zeigt, wie ein faszinierender Parallaxen -Hintergrundeffekt mit JQuery erstellt wird. Wir werden ein Header -Banner mit geschichteten Bildern bauen, die eine atemberaubende visuelle Tiefe erzeugen. Das aktualisierte Plugin funktioniert mit JQuery 1.6.4 und später. Laden Sie die herunter
So schreiben Sie eine Cookie-Less-Sitzungsbibliothek für JavaScript
Mar 06, 2025 am 01:18 AM
Diese JavaScript -Bibliothek nutzt das Fenster.name -Eigenschaft, um Sitzungsdaten zu verwalten, ohne sich auf Cookies zu verlassen. Es bietet eine robuste Lösung zum Speichern und Abrufen von Sitzungsvariablen über Browser hinweg. Die Bibliothek bietet drei Kernmethoden: Sitzung
Laden Sie den Inhalt des Box dynamisch mit AJAX
Mar 06, 2025 am 01:07 AM
Dieses Tutorial zeigt, dass dynamische Seitenfelder über AJAX geladen werden und sofortige Aktualisierung ohne vollständige Seiten -Nachladen ermöglicht werden. Es nutzt JQuery und JavaScript. Betrachten Sie es als einen benutzerdefinierten Content-Box-Loader im Facebook-Stil. Schlüsselkonzepte: Ajax und JQuery
