How to use livecycle events transition with d3.chart layer

[first-developer]

Hi, I'm trying to use events transition with d3.chart but it looks like it isn't working :'( http://jsfiddle.net/lioninho11/HH9SX/2/ Moreover, the documentation does only give definition for those transitions *:transtion but without giving few examples :) Please do you any idea or examples ?

Thanks a lot

[jugglinmike]

Hi there,

You appear to be using the :transition lifecycle event correctly in your example, but you are not declaring any attributes to be animated. Here's a simplified version of your chart:

  // ...
  dataBind: function(data) {
    return this.selectAll("path")
      .data(data);
  },            
  insert: function() {
    return this.append("path");
  },
  "enter:transition" : function() {
    var chart = this.chart();
    return this.duration(2000)
      .delay(2000);
  }
  // ...

This could be written in "plain" d3.js as:

base.selectAll("path")
  .data(data).append("path")
    .enter().transition()
      .duration(2000).delay(2000);

...which might make it more obvious why you aren't seeing any animations.

If you set an animate-able attribute on the enter:transition lifecycle event, then d3.js will animate it. For example, this is how you would update your handler to animate the stroke-width:

  // ...
  "enter:transition" : function() {
    var chart = this.chart();
    return this.duration(2000)
-     .delay(2000);
+     .delay(2000)
+     .style("stroke-width", "5px");
  }
  // ...

(Also: you don't have to return the selection from within lifecycle events.)

Does this help?

[jugglinmike]

It's been a few months, so I'm going to close this issue. Hope my suggestion helped, @first-developer!