Like I do to Quebar the line in the D3 node.append

Question

This is the code that generates the text tag in the svg of using the D3 library:

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;
    });

returns the array of my Json object the attributes name and type, already tried to put the "
" and it didn’t work out.

I found a way that would be creating another text tag again, with different height, like:

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;
    });

So it stayed the way I want it, like this:

,

but I wonder if there’s any way to make that break inside the append

I want to break the line to get the name and the guy under each other:

Answer 1

Instead of

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

try

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

.text() uses the parser that removes html tags.

.html() injects HTML directly into the element, and for this purpose the example uses <br/> for line breaking. However you should also replace the element being added to one that supports nested elements - in the above example, a div.