d3 component

D3-componente

Uma abstração de componente leve para d3.js.

Características:

• Encapsula o padrão de atualização geral.
• Compositáveis ​​(mesmo recursivos!) Componentes funcionais sem estado.
• Destrua o gancho destroy confiável para limpar as coisas.
• Funciona muito bem com o Redux.

Exemplos:

Postagens | Versão ES6	Spinner | Versão ES6	StopWatch (Redux) | Versão ES6
Contador (redux) | Versão ES6	Todos	Plotagem de dispersão com menus (Redux) ES6 versão | Variante de seleção do raio
Relógio	Relógios do aeroporto	Exemplo-visualizador (Redux, ES6)
Gráfico de pizza fractal (ES6)

Usando essa abstração do componente, você pode facilmente encapsular os componentes da interface de usuário orientados a dados como "caixas-de-caixa" conceituais, isolando as preocupações de maneira limpa para vários níveis da sua árvore DOM. Essa abstração do componente é semelhante em conceito e funcionalidade para reagir componentes funcionais sem estado. Tudo o que um componente precisa para se renderizar e interagir com o estado do aplicativo é transmitido pela árvore componente no tempo de renderização. Os componentes não armazenam nenhum estado local; Essa é a principal diferença entre o componente D3 e o padrão de gráficos reutilizáveis. Nenhum tratamento especial é dado a eventos ou delegação de eventos, porque o uso pretendido está dentro de uma arquitetura de fluxo de dados unidirecional, como o Redux.

Instalação

Se você usar o NPM, npm install d3-component . Caso contrário, faça o download da versão mais recente. Você também pode carregar diretamente do unskg.com como uma biblioteca independente. AMD, CommonJs e ambientes de baunilha são suportados. Na baunilha, um d3 Global é exportado:

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

Referência da API

Nota: Houve um lançamento recente da versão importante e, junto com ela, houve mudanças substanciais da API.

Em resumo, a API se parece com o seguinte:

 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 a API completa em ação, confira este exemplo "Hello D3-Component".

# componente ( tagname [, className ])))

Cria um novo gerador de componentes que gerencia e renderiza os elementos DOM do nome de tag especificado.

O parâmetro opcional ClassName determina o valor do atributo de class nos elementos DOM gerenciados.

# componente . Criar ( função (seleção, d, i) )

Define a função Criar esse gerador de componentes, que será chamado sempre que uma nova instância de componente for criada, sendo passada uma seleção contendo o elemento DOM atual, o datum atual ( d ) e o índice do datum atual ( i ).

# componente . renderizar ( função (seleção, d, i) )

Define a função de renderização deste gerador de componentes. Esta função será invocada para cada instância do componente durante a renderização, sendo aprovada uma seleção contendo o elemento DOM atual, o dado atual ( d ) e o índice do dado atual ( i ).

# componente . Destroy ( função (seleção, d, i) )

Define a função de destruição deste gerador de componentes, que será invocado sempre que uma instância do componente for destruída, sendo passada uma seleção contendo o elemento DOM atual, o dado atual ( d ) e o índice do datum atual ( i ).

Quando uma instância do componente é destruída, a função de destruição de todos os seus filhos também é invocada (recursivamente), para que você possa ter certeza de que essa função será invocada antes que a instância componente seja removida do DOM.

A função de destruição pode opcionalmente retornar uma transição, que adiará a remoção do elemento DOM até que a transição seja concluída (mas apenas se a instância do componente pai não for destruída). As instâncias de componentes profundamente aninhadas podem remover seus nós DOM antes que a transição seja concluída; portanto, é melhor não depender do nó DOM existente após a conclusão da transição.

# componente . chave ( função )

Define a principal função usada na união de dados internos ao gerenciar elementos DOM para instâncias de componentes. Especificar uma função chave é opcional (o índice de matriz é usado como chave por padrão), mas tornará a renderização mais eficiente nos casos em que as matrizes de dados são reordenadas ou emendas ao longo do tempo.

# componente ( seleção [, dados [, contexto ]])

Renderiza o componente para a seleção fornecida, uma seleção D3 contendo um único elemento DOM. Um elemento DOM bruto também pode ser passado como argumento de seleção . Retorna uma seleção D3 contendo as seleções de Enter e atualize mescladas para instâncias de componentes.

• Se os dados forem especificados e forem uma matriz, uma instância do componente será renderizada para cada elemento da matriz, e a função renderização receberá um único elemento da matriz de dados como seu argumento D.
  • Caso útil: se os dados forem especificados como uma matriz vazia [] , todas as instâncias de componentes renderizadas anteriormente serão removidas.
• Se os dados forem especificados e não forem uma matriz, exatamente uma instância do componente será renderizada e a função renderização receberá o valor dos dados como seu argumento D.
• Se os dados não forem especificados, exatamente uma instância do componente será renderizada e a função renderização receberá undefined como seu argumento.

Em resumo, os componentes podem ser renderizados usando as seguintes assinaturas:

• selection.call(myComponent, dataObject) → Uma instância, a Função de renderização D será dataObject .
• selection.call(myComponent, dataArray) → Instâncias dataArray.length , Render Função D será dataArray[i]
• selection.call(myComponent) → Uma instância, a função de renderização D será undefined .

Se um objeto de contexto for especificado, cada elemento de dados na matriz de dados será superficial mesclado em um novo objeto cujo protótipo é o objeto de contexto , e a matriz resultante será usada no lugar da matriz de dados . Isso é útil para transmitir funções de retorno de chamada através da sua árvore de componentes. Para esclarecer, as duas invocações a seguir são 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 ) ;