How do I break the line in the nodeEnter.append of D3

Question

How do I break the line in the nodeEnter.append of D3

Navigation

#1 by (1 votes)

1

This is the code that generates the text tag in svg from 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;
    });

I found a way that would be re-creating another text tag, with different height, type:

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

Then it's the way I want it, like this:

,

ButIwantedtoknowifthereisanywaytomakethisbreakinappend

Iwanttobreakthelinetogetthenameandtypeoneunderneaththeother:

javascript d3.js

asked by anonymous 04.05.2018 / 20:13

1 answer

EntityFramework + Sql Server + ASP.NET MVC How to know the current position of an element in the option

score 1 · Accepted Answer

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 the example uses <br/> for line break. However you should also replace the element you are adding to one that supports nested elements - in the example above, a div .