d3 title tspan text not going to new line

Question

I have d3 title text which contains two tspans. and last tspan has display:block property, but still it is not going to new line.

Here is link: https://codepen.io/anon/pen/exJROb

JavaScript

var ttl = nodeg.append("title");
  ttl.append("tspan").text(function(d) { return d.data.name })
  ttl.append("tspan").text(function(d) { return "Records: " + d.data.count });

Css

tspan:nth-child(2n) {
              display: block;
            }

Any idea how can I fix that so that second portion of tooltip goes to new line ?

Thanks

Answer 1

I found solution using "\n" new-line character rather than using tspan and css.

https://codepen.io/anon/pen/jdWLyO

nodeg.append("title")
        .text(function(d) {
            return d.data.name + "\n" + "test";
        });