3

Estou preparando os dados para visualização e operações de visualização. Utilizo a biblioteca D3.js.

A coleção de dados é:

{ "autores" : [
  { "id":1, "nome": "Fulano" },
  { "id":2, "nome": "Ciclano" }
  ],
  "livros" : [
    {"id": 1, "autor": 1, "titulo": "AAA" },
    {"id": 2, "autor": 1, "titulo": "BBB" },
    {"id": 3, "autor": 2, "titulo": "CCC" },
    {"id": 4, "autor": 2, "titulo": "XXX" },
    {"id": 5, "autor": 2, "titulo": "YYY" }
  ]
}

A operação tem que agir de forma similar a um JOIN no comando SQL, obtendo como resposta o seguinte resultado:

[
  {"id":1, "autor": { "id": 1, "nome": "Fulano" }, "titulo": "AAA" },
  {"id":2, "autor": { "id": 1, "nome": "Fulano" }, "titulo": "BBB" },
  {"id":3, "autor": { "id": 2, "nome": "Ciclano" }, "titulo": "CCC" },
  {"id":4, "autor": { "id": 2, "nome": "Ciclano" }, "titulo": "XXX" },
  {"id":5, "autor": { "id": , "nome": "Ciclano" }, "titulo": "YYY" },
]

Existe alguma forma de se fazer isso utlizando a biblioteca D3.js?

1 Resposta 1

5

Se vc está tentando apenas gerar esse array final a partir dos dois arrays iniciais, basta fazer um mapeamento do segundo com o primeiro, e para isso não é necessário nenhuma biblioteca adicional. Segue sugestões de soluções:

1) Para cada livro, fazer uma substituição in-place filtrando o autor correto.

livros.forEach(function(d){ d.autor = autores.filter(function(g){ return g.id === d.autor })[0] });

Essa solução tem custo O(livros * autores), pois para cada livro, uma varredura no array de autores realizada (desencadeada pela função filter). Podemos melhorar...

2) Indexar os autores por id e iterar sobre os livros fazendo substituições in-place.

// Indexa autores
var autorMap = {};
autores.forEach(function(d){ autorMap[d.id] = d });
// Realiza substituição
livros.forEach(function(d){ d.autor = autorMap[d.autor] });

Essa solução tem custo O(livros + autores), pois primeiro itera-se sobre os autores indexando-os, e em seguida itera-se sobre os livros realizando a substituição através de uma consulta a custo constante.

Para sua segurança, sugiro uma solução final um pouco diferente...

3) Indexar os autores por id e iterar sobre os livros, clonando-os de forma segura, e retornando um novo array.

// Indexa autores
var autorMap = {};
autores.forEach(function(d){ autorMap[d.id] = d });
// Mapeia os livros para um novo array com livros modificados
var newArr = livros.map(function(d){ var c = deepCopy(d); c.autor = autorMap[d.autor]; return c });

Para entender mais sobre essas funções que demonstrei (forEach, filter, map) consulte a documentação oficial da Mozilla. Inclusive a própria D3 incentiva isso.

Com respeito ao join que foi cogitado na pergunta, vale considerar o que de fato significa join para a D3. No excelente artigo de Mike, "Thiking with Joins", lemos:

Thinking with joins means declaring a relationship between a selection (such as "circle") and data, and then implementing this relationship through the three enter, update and exit states.

Perceba que o join define não apenas um relacionamento entre seleções (elementos do DOM) e dados (js arrays, objects, etc), como principalmente a forma como esse relacionamento é processado (através de três estados sequenciais).

Ou seja, isso está mais relacionado a um padrão alto-nível de manipulação de elementos -melhor, documento - do que a uma técnica baixo-nível de tratamento de dados. Inclusive existe um nome para isso: Data-Driven Documents

Então, se vc está buscando soluções pontuais para problemas de manipulação de objetos, arrays ou dados em geral, deve-se primeiro pensar em como alcançar isso utilizando js nativo apenas, e em seguida buscar alguma biblioteca que forneça utilidades (como underscore.js). De outra forma, se vc está buscando um novo paradigma de como manipular documentos (diferente do jQuery p.ex.), D3 é a resposta. E vc ainda ganha uma diversidade enorme de utilidades de brinde! ;)

3
  • Excelente esse artigo Thinking with Joins, é uma peça fundamental para entender a d3.
    – bfavaretto
    Commented 13/11/2014 às 2:37
  • uma pena que o d3 nao implemente manipulação de arrays, ou 'data', é pessa fundamental no seu funcionamento. Por falar nisso por que o d3 não implementa uma busca ciclica em seu D3.selection.data =\
    – heat
    Commented 14/11/2014 às 10:53
  • O D3 implementa várias manipulações de arrays interessantes ( vide Array Operators), porém ele não reimplementa soluções já nativas. Essa necessidade que vc expos seria uma solução interesante a se ter no cardápio. Talvez valha a pena sugerir na comunidade.
    – reinert
    Commented 14/11/2014 às 14:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .