d3 component

componente D3

Una abstracción de componentes livianos para D3.JS.

Características:

• Encapsula el patrón de actualización general.
• Componentes funcionales sin apáitoos compuestos (¡incluso recursivos!).
• Confiable destroy Hook para limpiar las cosas.
• Funciona muy bien con Redux.

Ejemplos:

Publicaciones | Versión ES6	Spinner | Versión ES6	Stopwatch (Redux) | Versión ES6
Contador (Redux) | Versión ES6	Diádico	Parcela de dispersión con menús (Redux) Versión ES6 | Variante de radio seleccionado
Reloj	Relojes de aeropuerto	Ejemplo-Viewer (Redux, ES6)
Gráfico de pastel fractal (ES6)

Usando esta abstracción de componentes, puede encapsular fácilmente los componentes de la interfaz de usuario basados ​​en datos como "cajas en cajas" conceptuales, aislando limpiamente las preocupaciones para varios niveles de su árbol DOM. Esta abstracción de componentes es similar en concepto y funcionalidad para reaccionar componentes funcionales sin estado. Todo lo que un componente necesita para hacerse solo e interactuar con el estado de aplicación se transmite a través del árbol de componentes en el momento del renderizado. Los componentes no almacenan ningún estado local; Esta es la principal diferencia entre el componente D3 y el patrón de gráficos reutilizables. No se otorga un tratamiento especial a los eventos o la delegación de eventos, porque el uso previsto está dentro de una arquitectura de flujo de datos unidireccional como Redux.

Instalación

Si usa NPM, npm install d3-component . De lo contrario, descargue el último lanzamiento. También puede cargar directamente desde impkg.com como una biblioteca independiente. Los entornos AMD, CommonJ y vainilla son compatibles. En vainilla, se exporta un d3 Global:

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

Referencia de API

Nota: Hubo un lanzamiento reciente de la versión principal, y junto con él hubo cambios sustanciales de API.

En resumen, la API se ve así:

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

Para ver la API completa en acción, consulte este ejemplo de "Hello D3-Component".

# componente ( tagName [, classname ]))

Crea un nuevo generador de componentes que administra y se convierte en elementos DOM del nombre de etiqueta especificado.

El nombre de clase de parámetro opcional determina el valor del atributo class en los elementos DOM gestionados.

# Componente . Crear ( función (selección, d, i) )

Establece la función Crear de este generador de componentes, que se invocará cada vez que se cree una nueva instancia de componente, se pasa una selección que contiene el elemento DOM actual, el dato actual ( d ) y el índice del dato actual ( i ).

# Componente . render ( función (selección, d, i) )

Establece la función de renderizado de este generador de componentes. Esta función se invocará para cada instancia de componente durante la representación, pasando una selección que contiene el elemento DOM actual, el dato actual ( d ) y el índice del dato actual ( i ).

# Componente . destruir ( función (selección, d, i) )

Establece la función de destrucción de este generador de componentes, que se invocará cada vez que se destruya una instancia de componente, se pasa una selección que contiene el elemento DOM actual, el dato actual ( d ) y el índice del dato actual ( i ).

Cuando se destruye una instancia de componente, la función de destrucción de todos sus hijos también se invoca (recursivamente), por lo que puede estar seguro de que esta función se invocará antes de que se elimine la instancia de componente del DOM.

La función de destrucción puede devolver opcionalmente una transición, que diferirá la eliminación del elemento DOM hasta que finalice la transición (pero solo si la instancia del componente principal no se destruye). Las instancias de componentes profundamente anidados pueden eliminar sus nodos DOM antes de que se complete la transición, por lo que es mejor no depender del nodo DOM existente después de que se complete la transición.

# Componente . clave ( función )

Establece la función clave utilizada en la unión de datos internos al administrar elementos DOM para instancias de componentes. La especificación de una función clave es opcional (el índice de matriz se usa como clave de forma predeterminada), pero hará que la reenvolución sea más eficiente en los casos en que las matrices de datos se reordenen o se empalmen con el tiempo.

# componente ( selección [, data [, context ]])

Rendera el componente a la selección dada, una selección D3 que contiene un solo elemento DOM. Un elemento DOM bruto también puede pasar como argumento de selección . Devuelve una selección D3 que contiene las selecciones de ingresos y actualizaciones fusionadas para instancias de componentes.

• Si los datos se especifican y son una matriz, se representará una instancia de componente para cada elemento de la matriz, y la función de renderizado recibirá un elemento único de la matriz de datos como su argumento D.
  • Caso útil: si los datos se especifican como una matriz vacía [] , se eliminarán todas las instancias de componentes previamente renderizadas.
• Si los datos se especifican y no son una matriz, se presentará exactamente una instancia de componente, y la función de renderización recibirá el valor de datos como su argumento D.
• Si los datos no se especifican, se presentará exactamente una instancia de componente, y la función de renderización recibirá undefined como su argumento D.

En resumen, los componentes se pueden representar utilizando las siguientes firmas:

• selection.call(myComponent, dataObject) → Una instancia, la función de render d será dataObject .
• selection.call(myComponent, dataArray) → dataArray.length instancias, la función de render d será dataArray[i]
• selection.call(myComponent) → Una instancia, la función de render d estará undefined .

Si se especifica un objeto de contexto , cada elemento de datos en la matriz de datos se fusionará en un nuevo objeto cuyo prototipo es el objeto de contexto , y la matriz resultante se utilizará en lugar de la matriz de datos . Esto es útil para transmitir funciones de devolución de llamada a través de su árbol de componentes. Para aclarar, las siguientes dos invocaciones son equivalentes:

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