Animating wrapped text in d3

Question

Hmmm. Now that I've figured out how to wrap SVG text dynamically using TSPANs (see Auto line-wrapping in SVG text), trying to animate it has me stumped. I'm basing it off the Zoomable Treemap example from Mike Bostock.

My text wrapping code is invoked thus:

    g.append("text")
     .attr("dy", ".75em")
     .text(function(d) { return d.name; })
 //  .call(text)                // Mike's line
     .each(function (d,i) {     // My line
         wraptorect(this,this.previousSibling,6,2,2);
     });

Putting the old Mike line back works fine but removes the text wrapping:

function text(text) {
  text.attr("x", function(d) { return x(d.x) + 6; })
      .attr("y", function(d) { return y(d.y) + 6; });
}

I'd have thought that you'd just need to animate the parent TEXT element but I'm getting the text moving in weird directions in Chrome (and even worse behaviour in IE9 where the text doesn't want to wrap yet). I suspect it's something to do with the TSPANs having x attributes but can't see the way forward beyond that...

Single line

<text dy=".75em" x="252" y="2">Other purposes which could be interesting</text>

Wrapped lines

<text dy=".75em" x="252" y="2">
  <tspan x="252" dy="15">Other purposes </tspan>
  <tspan x="252" dy="15">which could be </tspan>
  <tspan x="252" dy="15">interesting </tspan>
</text>

The JS code is quite long so here's the fiddle link: http://jsfiddle.net/gHdR6/6/

Answer 1

If TSPANs are positioned absolutely (ie. they have x and / or y attributes) then you can't move then by moving the parent TEXT. You can either (a) position them relatively (using dx and dy), or (b) move the entire text block by using a transform on the TEXT or a wrapper G. I found inconsistencies in how IE and Chrome render font-widths so used (b) to good effect.

See http://jsfiddle.net/gHdR6/15/ for the updated demo. Here's the SVG structure which works:

<text transform="translate(772,439)">
    <tspan x="0" dy="15">Transport and </tspan>
    <tspan x="0" dy="15">communication </tspan>
</text>

Your zoom (or animation) code then needs to update the translate for these nodes instead of x and y.