2.7 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fa6367417b2b2512bc2 | Dokumentelemente mit D3 hinzufügen | 6 | 301474 | add-document-elements-with-d3 |
--description--
D3 verfügt über mehrere Methoden, mit denen du Elemente in deinem Dokument hinzufügen und ändern kannst.
Die select()-Methode wählt ein Element aus dem Dokument aus. Sie nimmt ein Argument für den Namen des gewünschten Elements entgegen und gibt einen HTML-Knoten für das erste Element im Dokument zurück, das dem Namen entspricht. Hier ist ein Beispiel:
const anchor = d3.select("a");
Im obigen Beispiel wird das erste Anker-Tag auf der Seite gefunden und ein HTML-Knoten für dieses in der Variable anchor gespeichert. Du kannst die Auswahl mit anderen Methoden verwenden. Der d3-Teil des Beispiels ist ein Verweis auf das D3-Objekt, mit dem du auf D3-Methoden zugreifst.
Zwei weitere nützliche Methoden sind append() und text().
Die append()-Methode akzeptiert das Element, welches du dem Dokument hinzufügen möchtest, als Argument. Es fügt einen HTML-Knoten einem bestimmten Element hinzu und gibt ein Handle zu diesem Knoten zurück.
Die text()-Methode legt entweder den Text des ausgewählten Knotens fest oder ruft den aktuellen Text ab. Übergib ein String als Argument innerhalb der Klammern der Methode, um den Wert festzulegen.
Hier ist ein Beispiel, das eine ungeordnete Liste auswählt, ein Listenelement anhängt und Text hinzufügt:
d3.select("ul")
.append("li")
.text("Very important item");
Mit D3 kannst du mithilfe von Punkten mehrere Methoden „verketten“, um verschiedene Aktionen hintereinander auszuführen.
--instructions--
Verwende die select-Methode, um das body-Tag im Dokument auszuwählen. Füge anschließend mithilfe von append einen h1-Tag hinzu und gebe diesem h1-Element den Text Learning D3.
--hints--
Der body sollte über ein h1-Element verfügen.
assert($('body').children('h1').length == 1);
Das h1-Element sollte den Text Learning D3 enthalten.
assert($('h1').text() == 'Learning D3');
Dein Code sollte auf das d3-Objekt zugreifen.
assert(code.match(/d3/g));
Dein Code sollte die select-Methode verwenden.
assert(code.match(/\.select/g));
Dein Code sollte die append-Methode verwenden.
assert(code.match(/\.append/g));
Dein Code sollte die text-Methode verwenden.
assert(code.match(/\.text/g));
--seed--
--seed-contents--
<body>
<script>
// Add your code below this line
// Add your code above this line
</script>
</body>
--solutions--
<body>
<script>
d3.select("body")
.append("h1")
.text("Learning D3")
</script>
</body>