Inserting new line in .html() using D3 - text

Question

I have JS objects like these:
{
name : "sldjfvbsdolbobgsd",
myWeight : "[1,65,34,4,6,7,4,4,7,8,5]"
}
For each such object, there is a circle in an SVG element in force-directed layout.
'i' is a global variable. I am displaying the 'name' element of each object like this currently:
node.append("text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function (d) { return d.name; });
I want to display both the name and the current weight of each object. I tried something like this but it didn't work:
*node.append("text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.html(function (d) { return d.name; } + "<br />" + function (d) { return d.myWeight[i]; });*
The output for every node is like this:
function (d) { return d.name; }function (d) { return d.myWeight[i]; }
whereas I want:
sldjfvbsdolbobgsd
34 // say, if `i` is 2
Please help me with displaying it correctly.

Answer 1

The reason your code doesn't work is because d3 expects the argument passed to .html to be either a function or a constant. In your case the + causes the functions to be converted to strings. So the constant that you pass to .html ends up being:
function (d) { return d.name; } <br /> function (d) { return d.myWeight[i]; }
However, the SVG text element does not render the <br/> tag and so you don't get the line break.
The proper way to add line breaks inside SVG text is to use tspan with dy offets:
var text = node.append("text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em");
text.append("tspan")
.attr("dy", 0)
.attr("x",0)
.text(function(d) {return d.name;});
text.append("tspan")
.attr("dy", "1.2em") // offest by 1.2 em
.attr("x",0)
.text(function(d) {return d.myWeight;});