Trying to use chaining to create wrapped text

Question

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: https://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...

score 2 · Answer 1 · answered Oct 10 '16 at 11:51

2

You're using a . when you need a : as the d3 namespace separator for the tspan element (you get it right for the text element)
The transform presumably applies to the text element so needs to come before the tspan creation
The two text contents will overwrite, you can only have one per element.

Overall you probably want something like this...

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

answered Oct 10 '16 at 11:51

Robert Longson

118,664
26
252
242

Yes, I was about to ask OP if that dot instead of colon was a typo. – Gerardo Furtado Oct 10 '16 at 11:53
(only first read the acronym `svg` last week so thanks for spotting the typo!) – whytheq Oct 10 '16 at 11:54
@Robert - this has helped a lot but still misbehaving - please see screenshot I've added to the original post – whytheq Oct 10 '16 at 13:26
@whytheq You've got a dy attribute and that's what it does. If you don't want that, remove it. – Robert Longson Oct 10 '16 at 13:29
@RobertLongson if I comment out `.attr("dy", ".35em")` then it all appears on 1 row – whytheq Oct 10 '16 at 13:40
Isn't that what you wanted? If not then explain clearly what you actually do want? – Robert Longson Oct 10 '16 at 13:41
@RobertLongson isn't the title of my post explicit? `Trying to use chaining to create wrapped text` – whytheq Oct 10 '16 at 15:04
@whytheq, you need an .attr('x', 0) on the `tspan` and to increase your `dy`. See [here](http://plnkr.co/edit/RQ84DWiMCHApRMJOz4ET?p=preview). – Mark Oct 10 '16 at 15:07
@whytheq no, it's not clear at all how you want to layout the text. – Robert Longson Oct 10 '16 at 15:08
@RobertLongson apologies for not being clear - the link mark has supplied above is sport on - two lines of text, one above the other, both centre aligned – whytheq Oct 10 '16 at 15:12

Gerardo Furtado · Accepted Answer · 2016-10-10T14:27:37.660

1

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

edited Oct 10 '16 at 14:27

answered Oct 10 '16 at 11:50

Gerardo Furtado

100,839
9
121
171

this has helped a lot but still misbehaving - please see screenshot I've added to the original post – whytheq Oct 10 '16 at 13:26
If you want "for current month" to be under "revenue split", you'll have to set the `x`. value again, and probably increase that `dy`. I just edited the answer, please check it. – Gerardo Furtado Oct 10 '16 at 14:29
once this `".35em"` is adjusted to this `1.1em` things are happy. – whytheq Oct 10 '16 at 15:57

score 0 · Answer 3 · answered Oct 10 '16 at 15:56

This code by Mark in the comments above worked:

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

Trying to use chaining to create wrapped text

3 Answers3