A essa altura você já usou um bocado uma abstração central do d3: seleções.
Quando você faz d3.selectAll('text'), por exemplo, você está criando uma seleção
d3 que contém todos os elementos text do DOM.
Para ligar elementos do DOM e dados, d3 usa outra abstração chamada join.
Quando fazemos d3.selectAll('text').data(dados) estamos juntando à seleção
uma lista de dados. Se depois fizermos outro join d3.selectAll('text').data(outrosDados), ele substituirá
o primeiro.
Nesse exemplo e nos próximos dois, vamos explorar mais como operar sobre o resultado da seleção depois de um join.
Temos 3 situações com as quais queremos lidar:
update do join, que é o que é retornado a partir do join.
d3.selectAll('text').data(dados).attr('class', 'mudada')
vai setar todos os elementos da seleção para os quais há dados correspondentes
na lista dados com a classe css mudada. No join feito como
fizemos, sem especificar nenhuma maneira de mapear dados para elementos, a atualização
mapeia cada elemento de dados para cada elemento da seleção pelo índice.
enter do join: d3.selectAll('text').data(dados).enter().append('text').text(d => d.conteudo)
vai adicionar, para cada elemento de dados para o qual não há um elemento
correspondente na seleção, um elemento text baseado no elemento de dados.
exit do join: d3.selectAll('text').data(dados).exit().remove()
vai remover, para cada elemento de dados para o qual não há um elemento
correspondente na seleção, o elemento text.
Nesse exemplo, cada vez que você aperta o botão, um subconjunto de a a outra letra do alfabeto é escolhido como novo dado e as seleções de UPDATE, ENTER e EXIT são usadas, uma por vez.
No próximo exemplo de ENTER/EXIT fazemos as alterações mapeando os dados para elementos de uma maneira mais sofisticada.