Changing speed of D3 path animation

Question

Here is the code: http://jsfiddle.net/fJAwW/

This is what I am interested in:

path
  .attr(\"stroke-dasharray\", totalLength + \" \" + totalLength)
          


        

Answer 1

One interesting thing about d3 is that data isn't stored in the d attribute, it's in the __data__ attribute. Paths are special in that this isn't actually where the data about the path is stored. While it's possible to circumvent it, I would highly recommend using the standard d3 data pattern, with .data(), .enter(), and .append().

Because you never actually enter any data, __data__ is empty, and, as a result, d is undefined if you use .duration(function(d) {}).

In general, when you pass a function like that, the variable itself doesn't matter. The first variable is always assigned to __data__ for the selection and the second is always the index.

Probably the best example of the update pattern is this block by Mike Bostock. There's also some great info in the API if you get stuck, as well as about ten billion tutorials on how to make a scatter plot that all say about the same thing.

You can use .data() to put some data in your path, and then access it with a function in .duration(), like so:

path.data([{'duration':1000}])
    .transition()
    .duration(function(d){return d.duration})