whytheq whytheq - 1 month ago 13
Javascript Question

Trying to use chaining to create wrapped text

I'm using D3 and SVG and am attempting to wrap some text by using attributes and chaining. This is my current code:

vis.append("svg:text")
.attr("x", "0")
.attr("y", "0")
.attr("text-anchor", "middle")
.append("svg.tspan")
.attr("dy", ".35em")
.text("Revenue Split")
.text("for Current Month")
.attr("transform", "translate(50,50)")
.attr("class", "title");


The above is an attempt to translate this answer to using
attr
: http://stackoverflow.com/a/16701952/1179880

My attempt results in nothing showing on the screen.




update

With the help of the current two answers I've amended my code to the following:

vis.append("svg:text")
.attr("x", "0")
.attr("y", "0")
.attr("class", "title")
.attr("text-anchor", "middle")
//.attr("transform", "translate(50,50)")
.text("Revenue Split")
.append("svg:tspan")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text("for Current Month")
.attr("class", "title");


It appears to be heading in the right direction - although not quite as expected and on two distinct lines. The text appears as follows...

enter image description here

Answer

You have to define the text for the text element and then define the text for the tspan element:

vis.append("text")
.attr("x", "0")
.attr("y", "0")
.attr("text-anchor", "middle")
.text("Revenue Split")
.append("tspan")
.attr("x", "0")
.attr("dy", ".35em")
.text("for Current Month")
.attr("class", "title");