d3 component

d3

Une abstraction de composants légers pour d3.js.

Caractéristiques:

• Résume le modèle de mise à jour général.
• Composants fonctionnels composables (même récursifs!).
• destroy fiable pour nettoyer les choses.
• Fonctionne très bien avec Redux.

Exemples:

Postes | Version ES6	Spinner | Version ES6	Chronomètre (redux) | Version ES6
Compteur (redux) | Version ES6	Todos	Plot de dispersion avec les menus (redux) Version ES6 | Variante de sélection de rayon
Horloge	Horloges d'aéroport	Exemple-Viewer (Redux, ES6)
Graphique à tarte fractale (ES6)

En utilisant cette abstraction de composants, vous pouvez facilement encapsuler les composants d'interface utilisateur basés sur les données comme des "boîtes-boîtes" conceptuelles, isolant proprement les préoccupations pour différents niveaux de votre arbre DOM. Cette abstraction des composants est similaire dans le concept et la fonctionnalité pour réagir les composants fonctionnels sans état. Tout ce dont un composant a besoin pour se rendre et interagir avec l'état d'application est transmis par l'arborescence des composants au moment du rendu. Les composants ne stockent aucun État local; Il s'agit de la principale différence entre le composant D3 et le modèle de graphiques vers réutilisable. Aucun traitement spécial n'est donné aux événements ou à la délégation d'événements, car l'utilisation prévue se situe dans une architecture de flux de données unidirectionnelle comme Redux.

Installation

Si vous utilisez NPM, npm install d3-component . Sinon, téléchargez la dernière version. Vous pouvez également charger directement sur unfkg.com en tant que bibliothèque autonome. Les environnements AMD, CommonJS et Vanilla sont pris en charge. Dans Vanilla, un d3 Global est exporté:

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

Référence de l'API

Remarque: il y a eu une version récente de version majeure, et avec lui, il y a eu des changements API substantiels.

En résumé, l'API ressemble à ceci:

 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().

Pour voir l'API complète en action, consultez cet exemple "Hello D3-composant".

# composant ( tagname [, className ]))

Crée un nouveau générateur de composants qui gère et rend les éléments DOM du nom de tagname spécifié.

Le paramètre facultatif ClassName détermine la valeur de l'attribut class sur les éléments DOM gérés.

# composant . créer ( fonction (sélection, d, i) )

Définit la fonction de création de ce générateur de composants, qui sera invoquée chaque fois qu'une nouvelle instance de composante sera créée, en étant passé une sélection contenant l'élément DOM actuel, la donnée actuelle ( D ) et l'index de la référence actuelle ( i ).

# composant . rendu ( fonction (sélection, d, i) )

Définit la fonction de rendu de ce générateur de composants. Cette fonction sera invoquée pour chaque instance de composant lors du rendu, dépassé une sélection contenant l'élément DOM actuel, la référence actuelle ( D ) et l'index de la référence actuelle ( I ).

# composant . détruire ( fonction (sélection, d, i) )

Définit la fonction de détruire de ce générateur de composants, qui sera invoqué chaque fois qu'une instance de composante est détruite, dépassé une sélection contenant l'élément DOM actuel, la donnée actuelle ( D ) et l'index de la référence actuelle ( i ).

Lorsqu'une instance de composant est détruite, la fonction de détruire de tous ses enfants est également invoquée (récursivement), vous pouvez donc être sûr que cette fonction sera invoquée avant que l'instance de composé ne soit supprimée du DOM.

La fonction de destruction peut éventuellement renvoyer une transition, qui différera l'élimination des éléments DOM jusqu'à la fin de la transition (mais uniquement si l'instance du composant parent n'est pas détruite). Les instances de composants profondément imbriquées peuvent faire supprimer leurs nœuds DOM avant la fin de la transition, il est donc préférable de ne pas dépendre du nœud DOM existant une fois la transition terminée.

# composant . clé ( fonction )

Définit la fonction clé utilisée dans la jointure des données internes lors de la gestion des éléments DOM pour les instances de composant. La spécification d'une fonction de clé est facultative (l'index du tableau est utilisé comme clé par défaut), mais rendra la réintégration plus efficace dans les cas où les tableaux de données sont réorganisés ou épissés au fil du temps.

# composant ( sélection [, data [, contexte ]])

Rend la composante à la sélection donnée, une sélection D3 contenant un seul élément DOM. Un élément DOM brut peut également être transmis comme l'argument de sélection . Renvoie une sélection D3 contenant les sélections Entrée et mise à jour fusionnées pour les instances de composant.

• Si les données sont spécifiées et est un tableau, une instance de composante sera rendue pour chaque élément du tableau, et la fonction de rendu recevra un seul élément du tableau de données comme argument D.
  • Cas utile: si les données sont spécifiées en tant que tableau vide [] , toutes les instances de composants précédemment rendues seront supprimées.
• Si les données sont spécifiées et ne sont pas un tableau, exactement une instance de composante sera rendue et la fonction de rendu recevra la valeur des données comme argument D.
• Si les données ne sont pas spécifiées, exactement une instance de composante sera rendue et la fonction de rendu recevra undefined comme argument D.

En résumé, les composants peuvent être rendus en utilisant les signatures suivantes:

• selection.call(myComponent, dataObject) . dataObject
• selection.call(myComponent, dataArray) → dataArray.length Instances, Render Fonction D sera dataArray[i]
• selection.call(myComponent) → Une instance, la fonction de rendu D ne sera undefined .

Si un objet contextuel est spécifié, chaque élément de données du tableau de données sera fusionné dans un nouvel objet dont le prototype est l'objet de contexte , et le tableau résultant sera utilisé à la place du tableau de données . Ceci est utile pour transmettre des fonctions de rappel via votre arborescence de composants. Pour clarifier, les deux invocations suivantes sont équivalentes:

 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 ) ;