D3.js - Simple Counter Example

javascript
js
d3
#1

Das Simple Counter d3 Beispiel ist ein einfacher Zähler

Der gesamte Code ist auf unserem Code-Server veröffentlicht und kann auch als ZIP heruntergeladen werden.

Die Aufgabe ist in mehreren Schritten gelöst. Wenn ihr auf die Links klickt, seht ihr, wass sich geändert hat.

Tip: Bitte schaut euch an, wie ich die CSS Datei organisiert habe; mit Kommentaren getrennte Bereiche für Basis+Typo, Animationen und Layout. Das hilft, einen besseren Überblick über die Style-Regeln zu behalten.

Zusätzlich ist für die Animationen des Zählers bei weniger oder mehr als 0 die d3 Funktion .classed(...) benutzt worden. Ihr seht im Code, dass wir wieder eine Funktion schreiben, deren Ergebnis (via return ...) bestimmt, ob die zuvor genannten Klassen, z.B. positive, auf dem HTML element gesetzt werden oder nicht.
Diese Strategie ist hilfreich, um erste Animationen zwischen verschiedenen Zuständen im CSS zu machen.

Hier ist ein Schnipsel aus der main.js:

function render() {
    // Wir vorher auch schon, setzen wir den text im counterDisplay element
    counterDisplay.text(counter)

    // Wir wollen nun die Klasse `minus` setzen, wenn der
    // `counter` kleiner als `0` ist. Dafür rufen wir die `classed` Methode
    // der `counterDisplay` Selektion auf - mit dem Klassen-Namen und
    // einer Funktion, deren Ergebnis `true` oder `false` ist. Den Rest
    // erledigt `d3` für uns.
    counterDisplay.classed('minus', function() {
        return counter < 0;
    })

    // Und das gleiche machen wir mit positiven Werten der `counter`
    counterDisplay.classed('positive', function () {
        return counter > 0;
    })
}

Bitte fragt nach, wenn ihr etwas nicht verstanden habt! :slight_smile:

Hier ist das Projekt mit allem: https://src.muid.sh/prototyping/javascript/d3/simple-counter/

0 Likes

#2

… und in einem 2. Schritt kann die Schriftgröße der Zahl auch direkt mit dem Wert des Zählers mit Hilfe von d3 geändert werden:

Der Code ist in 3 Schritten zu sehen:

Den Finale Code hier als ZIP herunterladen oder anschauen

0 Likes

#3

Ich habe in einem anderem Projekt (Analyse der Worthäufigkeiten) ein Problem bei der Zuweisung einer Klasse zu einer Textbox durch Klick auf einen Button (sprich selbe Thematik, anderes Projekt).
Hier der Link zu der Stelle in meinem Code:

Kann jemand helfen? :slight_smile:

0 Likes

#4

Ein Klassiker, den man leicht übersieht. Die JS Dateien werden im HTML zu fürh geladen und dann sind die Element im Script nicht bekannt. Das gibt zwar keine Fehler in der Konsole, aber der Klick-Handler ist auch an kein Element gebunden.

Die Lösung: die <script .... Tags an das Ende des Bodys bewegen:

grafik

1 Like

#5

Super, danke :slight_smile:

0 Likes