1

Este é o código que gera a tag texto no svg do usando a biblioteca D3:

nodeEnter.append("text")
        .attr("x", rectW / 2)
        .attr("y", rectH/3)
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .text(function (d) {
        return d.nome + "\n"+ d.tipo;
    });

retorna o array do meu objeto Json os atributos nome e tipo, ja tentei colocar o "
" e nao deu certo.

Achei uma forma que seria criando novamente outra tag texto, com a altura diferente, tipo:

nodeEnter.append("text")
        .attr("x", rectW / 2)
        .attr("y", rectH/3)
        .attr("dy", ".35em")
        .attr("text-anchor", "start")
        .text(function (d) {
        return d.nome ;
    });

    nodeEnter.append("text")
        .attr("x", rectW / 2)
        .attr("y", rectH/2)
        .attr("dy", ".35em")
        .attr("text-anchor", "start")
        .text(function (d) {
        return  d.tipo;
    });

Entao ficou do jeito que eu quero, assim:

inserir a descrição da imagem aqui,

porém queria saber se tem algum jeito de fazer essa quebra ai dentro do append

Quero quebrar a linha para ficar o nome e o tipo um debaixo do outro: inserir a descrição da imagem aqui

1 Resposta 1

1

Ao invés de

.append("text")
...
.text(function (d) {
    return d.nome + "\n"+ d.tipo;
})

tente

.append("div")
...
.html(function (d) {
    return d.nome + "<br/>"+ d.tipo;
})

.text() utiliza o parser que remove tags html.

.html() injeta HTML diretamente no elemento, e para isso o exemplo utiliza <br/> para quebra de linha. Entretanto você também deve substituir o elemento que está sendo adicionado para um que suporte elementos aninhados - no exemplo acima, uma div.

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 .