Por que o texto sai da caixa ao usar o exemplo D3 Word Cloud de Jason Davies?

Question

estou usando Nuvem de palavras D3 para um dos meus projetos.No exemplo é definido como largura e altura como 300 * 300.Mas quando eu executo, às vezes apenas metade do texto aparece na caixa.

Neste exemplo, é a palavra “Aleatório” à esquerda.Apenas "om" foi exibido.

Alguém pode me ajudar como exibir a saída em uma região específica?

Obrigado

Answer 1

As coordenadas das palavras na nuvem são calculadas assumindo que o centro da nuvem está em (0,0).Este não é o caso dos SVGs, então há uma g elemento abaixo do SVG de nível superior que tem a tradução do sistema de coordenadas apropriada aplicada.Ao alterar o tamanho da nuvem de palavras, você também precisa alterar isso.

No seu caso, o tamanho da nuvem de palavras é 800x300, então a tradução deve ser (400.150):

.append("g").attr("transform", "translate(400,150)")

Answer 2

Eu acho que a tradução deve ser metade da largura e altura.Por exemplo, se w= 300 h= 300, então traduzir deve ser traduzir (150.150).Espero que funcione.