Tween transition for text

[Komates]

Hi, 

I use a tween to perform a transition on my pie chart :

var timeout = setTimeout(function() {

    path = path.data(pie(dataset));

    path.transition().duration(750).attrTween("d", arcTween);

  }, 500);

  function arcTween(a) {

    var i = d3.interpolate(this._current, a);

    this._current = i(0);

    return function(t) {

      return arc(i(t));

    };

  }

And I have a legend for each arc :

var txt = d3.selectAll(".arc")

      .append("text")

        .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })

        .attr("dy", ".35em")

        .style("text-anchor", "middle")

        .text(function(d) { return d.data.type; });

The arcs perform the transition but not the text. The text keep the original position.

Is it possible to make a tween in order to move the text as the arcs ? 

Thank you

Best regards

[Scott Cameron]

The arcs perform the transition but not the text. The text keep the original position.

Is it possible to make a tween in order to move the text as the arcs ? 

Sure, you can use an update selection on the arc text elements and transition the transform attribute in a similar way to have you're transitioning your arcs.  Here's an interesting link that might not be strictly relevant to your scenario but highlights some trickiness around interpolating transform values when working with arcs:  Transform Interpolation.

Cheers,

scott

[Komates]

Hi,

Thank you very much.

I saw the example and indeed, it's what I'm looking for.

The problem is I don't see how to apply the solution to my problem.

This is how I add the text in my svg :

var txt = d3.selectAll(".arc")

      .append("text")

        .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })

        .attr("dy", ".35em")

        .style("text-anchor", "middle")

        .text(function(d) { return d.data.type; });

And to move my pie I have a timer :

var timeout = setTimeout(function() {

    path = path.data(pie(dataset));

    path.transition().duration(750).attrTween("d", arcTween);

  }, 500);

I suppose I have to add the transition for my text inside the timeout, right ?

In other end, I set the position of my text thanks to : arc.centroid(d)

How to use this function in my transition ?

Thanks again !

[Komates]

This is my code : http://jsfiddle.net/3dZcv/

Le vendredi 23 novembre 2012 16:29:37 UTC+1, Komates a écrit :