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) .attr("stroke-dashoffset", totalLength) .transition() .duration(2000) .ease("linear") .attr("stroke-dashoffset", 0); ``` I have my data variable lineData, which I add to the path with ``` .attr("d", line(lineData)) ``` For the transition section: ``` .transition() .duration(2000) ``` I would like to do something like ``` .transition() .duration(function(d) { return d.x; }) ``` Where d is one of my data points. I am having trouble understanding the data structures and how they interact in d3.js, so any help would be appreciated.

Accepted Answer

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})
```

Changing speed of D3 path animation

Solution

Problem