d3 component

D3-Komponent

Eine leichte Komponentenabstraktion für D3.Js.

Merkmale:

• Kapuliert das allgemeine Update -Muster.
• Komponierbare (sogar rekursive!) Staatenlose funktionale Komponenten.
• Zuverlässig destroy Hook, um die Dinge aufzuräumen.
• Funktioniert hervorragend mit Redux.

Beispiele:

Beiträge | ES6 -Version	Spinner | ES6 -Version	Stoppuhr (Redux) | ES6 -Version
Zähler (Redux) | ES6 -Version	Todos	Streudiagramm mit Menüs (Redux) ES6 -Version | Radius -Variante wählen
Uhr	Flughafenuhren	Beispiel-Viewer (Redux, ES6)
Fraktalkreisdiagramm (ES6)

Mit dieser Komponentenabstraktion können Sie die datengesteuerten Benutzeroberflächenkomponenten einfach als konzeptionelle "Boxen-in-Boxen" zusammenfassen und die Bedenken hinsichtlich verschiedener Ebenen Ihres DOM-Baums sauber isolieren. Diese Komponentenabstraktion ist in Konzept und Funktionalität ähnlich, um die staatenlosen Funktionskomponenten zu reagieren. Alles, was eine Komponente benötigt, um sich selbst zu rendern und mit dem Anwendungszustand zu interagieren, wird zur Renderzeit über den Komponentenbaum weitergegeben. Komponenten speichern keinen lokalen Staat. Dies ist der Hauptunterschied zwischen D3-Komponenten und dem nach in Richtung wiederverwendbaren Diagrammmuster. Ereignisse oder Ereignisdelegation wird keine besondere Behandlung angelegt, da die beabsichtigte Verwendung in einer unidirektionalen Datenflussarchitektur wie Redux liegt.

Installation

Wenn Sie NPM verwenden, npm install d3-component . Laden Sie ansonsten die neueste Version herunter. Sie können auch direkt von UNPKG.com als eigenständige Bibliothek laden. AMD-, CommonJs- und Vanilleumgebungen werden unterstützt. In Vanille wird ein d3 Global exportiert:

 < script src =" https://unpkg.com/d3@4 " > </ script >
< script src =" https://unpkg.com/d3-component@3 " > </ script >
< script >
  var myComponent = d3 . component ( "div" ) ;
</ script > 

API -Referenz

Hinweis: Es gab eine kürzlich veröffentlichte Version der großen Version, und zusammen mit ihr gab es wesentliche API -Änderungen.

Zusammenfassend sieht die API so aus:

 var myComponent = d3 . component ( "div" , "some-class" )
  . create ( ( selection , d , i ) => { ... } ) // Invoked for entering component instances.
  . render ( ( selection , d , i ) => { ... } ) // Invoked for entering AND updating component instances.
  . destroy ( ( selection , d , i ) => { ... } ) ; // Invoked for exiting instances, may return a transition.

// To invoke the component,
d3 . select ( "body" ) // create a selection with a single element,
  . call ( myComponent , "Hello d3-component!" ) ; // then use selection.call().

Um die vollständige API in Aktion zu sehen, lesen Sie dieses Beispiel "Hallo D3-Komponenten".

# component ( tagname [, className ])))

Erstellt einen neuen Komponentengenerator, der DOM -Elemente des angegebenen Tagnamens verwaltet und zu verwaltet.

Der optionale Parameterklassenname bestimmt den Wert des class in den verwalteten DOM -Elementen.

# Komponente . erstellen ( Funktion (Auswahl, d, i) )

Legt die Funktion des Erstellens dieses Komponentengenerators fest, der aufgerufen wird, wenn eine neue Komponenteninstanz erstellt wird, und eine Auswahl , die das aktuelle DOM -Element, das aktuelle Datum ( d ) und den Index des aktuellen Datums ( i ) enthält.

# Komponente . Render ( Funktion (Auswahl, d, i) )

Legt die Renderfunktion dieses Komponentengenerators fest. Diese Funktion wird für jede Komponenteninstanz während des Renders aufgerufen, wobei eine Auswahl über das aktuelle DOM -Element, das aktuelle Datum ( d ) und den Index des aktuellen Datums ( I ) bestanden wird.

# Komponente . zerstören ( Funktion (Auswahl, d, i) )

Legt die Zerstörungsfunktion dieses Komponentengenerators fest, der aufgerufen wird, wenn eine Komponenteninstanz zerstört wird, und eine Auswahl mit dem aktuellen DOM -Element, dem aktuellen Datum ( d ) und dem Index des aktuellen Datums ( i ) übergeben wird.

Wenn eine Komponenteninstanz zerstört wird, wird die Zerstörungsfunktion aller ihrer Kinder ebenfalls (rekursiv) aufgerufen, sodass Sie sicher sein können, dass diese Funktion aufgerufen wird, bevor die Kompo -Instanz aus dem DOM entfernt wird.

Die Zerstörungsfunktion kann optional einen Übergang zurückgeben, der die Entfernung des Dom -Elements bis nach Abschluss des Übergangs aufschreibt (jedoch nur, wenn die Instanz der übergeordneten Komponenten nicht zerstört wird). In zutiefst verschachtelten Komponenten -Instanzen können ihre Dom -Knoten vor Abschluss des Übergangs entfernt werden. Daher ist es am besten, nicht vom DOM -Knoten abhängig zu sein, der nach Abschluss des Übergangs vorhanden ist.

# Komponente . Schlüssel ( Funktion )

Legt die Schlüsselfunktion fest, die im internen Daten Join verwendet wird, wenn DOM -Elemente für Komponenteninstanzen verwaltet werden. Das Angeben einer Schlüsselfunktion ist optional (der Array-Index wird standardmäßig als Schlüssel verwendet), wird jedoch in Fällen, in denen Datenarrays im Laufe der Zeit neu angeordnet oder gespleißt werden, effizienter gestaltet.

# Komponente ( Auswahl [, Daten [, Kontext ]])

Rendert die Komponente in die angegebene Auswahl , eine D3 -Auswahl, die ein einzelnes DOM -Element enthält. Ein Rohdom ​​-Element kann auch als Auswahlargument übergeben werden. Gibt eine D3 -Auswahl zurück, die die Auswahl für zusammengeführte Eingabetaste und Aktualisierungen für Komponenteninstanzen enthält.

• Wenn Daten angegeben werden und ein Array sind, wird für jedes Element des Arrays eine Komponenteninstanz gerendert, und die Renderfunktion erhält ein einzelnes Element des Datenarrays als D -Argument.
  • Nützlicher Fall: Wenn Daten als leeres Array [] angegeben werden, werden alle zuvor gerenderten Komponenteninstanzen entfernt.
• Wenn Daten angegeben werden und kein Array sind, wird genau eine Komponenteninstanz gerendert, und die Renderfunktion empfängt den Datenwert als Argument .
• Wenn keine Daten angegeben werden, wird genau eine Komponenteninstanz gerendert, und die Renderfunktion wird als D -Argument undefined .

Zusammenfassend können Komponenten mit den folgenden Unterschriften gerendert werden:

• selection.call(myComponent, dataObject) → Eine Instanzfunktion D ist dataObject .
• selection.call(myComponent, dataArray) → dataArray.length -Instanzen, Render -Funktion D ist dataArray[i]
• selection.call(myComponent) → Eine Instanzfunktion D wird undefined .

Wenn ein Kontextobjekt angegeben ist, wird jedes Datenelement im Datenarray flach in ein neues Objekt zusammengeführt, dessen Prototyp das Kontextobjekt ist, und das resultierende Array wird anstelle des Datenarrays verwendet. Dies ist nützlich, um die Rückruffunktionen über Ihren Komponentenbaum weiterzugeben. Zur Klärung sind die folgenden zwei Aufrufe gleichwertig:

 var context = {
  onClick : function ( ) { console . log ( "Clicked!" ) ;
} ;
selection . call ( myComponent , dataArray . map ( function ( d ) {
  return Object . assign ( Object . create ( context ) , d ) ;
} ) ) ; 

 var context = {
  onClick : function ( ) { console . log ( "Clicked!" ) ;
} ;
selection . call ( myComponent , dataArray , context ) ;